There was a question about to make an auto embed the most recent video from the channel.
I am trying to make auto embed the most recent video from youtube playlist to webpage.
If a new one would be added on the youtube playlist - it would automatically updates on your webpage.
Here is the code I tried, but it does not update for the latest video, possibly I do something wrong.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/rI4kdGLaUiQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
var channelID = "UCCTVrRB5KpIiK6V2GGVsR1Q";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
</script>
</body>
</html>
Your issue is that you're targetting an element with id youtube_video but have no element with that id. I tested this locally and saw your issue. Also I added some other code that's better (doing this on document ready).
<body>
<iframe id="youtube_video" width="560" height="315" src="https://www.youtube.com/embed/rI4kdGLaUiQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script type='text/javascript'>
$(document).ready(function() {
var channelID = "UCCTVrRB5KpIiK6V2GGVsR1Q";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
})
</script>
fiddle
Related
In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.
I am trying to access the body of the document from an iframe.
I the body I want to get the src value of another iframe.
<iframe src="https://putstream.com/movie/oblivion?watching=RaHP6KwPJ8prB0MfMlhJiYYwW" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="height: 820.5px;">
#document
<html lang="en">
<head><style class="vjs-styles-defaults">
</head>
<body>
<iframe id="openloadIframe" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%;" src="https://openload.co/embed/bbhP94t0548"></iframe>
</body>
</html>
My Attempts:
var oiframe = document.getElementsByTagName('iframe')[1]; //accessing the first iframe
var sif = oiframe.getElementById('openloadIframe').src; //getting the actual content
var ifc = oiframe.contentWindow.getElementById('openloadIframe').src; //at this point I just tried to get it working
var ifhtml = oiframe.contentWindow.document.body.innerHTML.getElementById('openloadIframe').src;
None of these work and I found nothing else how I could access the content of #document.
I have several youtube iframes with TV channels on my website page.
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
I'm trying to use one java script to play video muted and to stop it on pause event but it doesnt work for me. The script is following
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event){
player.stopVideo(0);
}
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
I need to full stop video on pause event, because it is live tv channel, so if I press pause now, in 10 minutes I will get a record but not a live stream. How can I make my script work?
UPDATE
OP has multiple players and uses plain JavaScript, the following changes are:
Multiple players shared the same id, now each player has a unique id.
Added a <button class='stop' data-id='yt*'>STOP</button> for each player.
Each button has a data-id. It's value corresponds to it's player's id.
Wrapped <section id='videoChannels'></section> around everything.
Added the eventListener to #videoChannels so when a button is clicked #videoChannels is referred to as the target.currentTarget which can be compared to the event.target to determine the button that was clicked (i.e. event.target).
After the capture eventPhase the event chain reaches event.target (the button that was clicked) and the function ytCommand() is called on the player that corresponds to the button (see step 2.)
Working Demo
PLUNKER
Stopping YouTube Player
Access the iframe by using contentWindow method
Next cross-domain communication through an iframe is possible with the postMessage API.
Next post commands from YouTube iFrame API
Relevant Code
$('#stop').on('click', function() {
$('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Working Demo
FIDDLE
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop YTPlayer</title>
</head>
<body>
<section id="videoChannels">
<div>
<iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt0'>STOP</button>
</div>
<div>
<iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt1'>STOP</button>
</div>
<div>
<iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt2'>STOP</button>
</div>
<div>
<iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt3'>STOP</button>
</div>
</section>
<script>
var vidCh = document.getElementById('videoChannels');
vidCh.addEventListener('click', ytCommand, false);
function ytCommand(event) {
if (event.target != event.currentTarget) {
var btn = event.target.getAttribute('data-id');
var ytp = document.getElementById(btn);
ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
}
</script>
</body>
</html>
I want to make 4 channel in my website, but I want to make start for the first channel automatically and after 5 second start the second channel ... etc
code of channel
The Code
window.addEventListener("load", function() {
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
iframe[n].style.display = "block";
console.log(n);
if (n === iframes.length -1)
{
clearInterval(interval); console.log("all iframes loaded")
}
},
5000)
})
.channel1, .channel2, .channel3{
display:none;
}
<html>
<head>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel1" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="channel2" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
<iframe class="channel3" width="560" height="315" src="https://www.youtube.com/embed/BqPmcSGgs3U" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This code doesn't work, I can listen the commutator talk but I cant see the channel why ?
You can set iframe elements 1-4 src to empty string, utilize setInterval to set src of each iframe 1-4 to a url within an array every five seconds until all iframe elements have src set.
window.addEventListener("load", function() {
var urls = ["data:text/plain,b", "data:text/plain,c", "data:text/plain,d"];
var iframes = document.querySelectorAll("iframe");
var n = 0;
var interval = setInterval(function() {
iframes[++n].src = urls[n - 1];
console.log(n);
if (n === iframes.length -1) {
clearInterval(interval);
console.log("all iframes loaded")
}
}, 5000)
})
<iframe src="data:text/plain,a"></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
<iframe src=""></iframe>
I've tried every possible solution I can find, but I can't seem to mute my iframe vimeo video. I've referenced "//f.vimeocdn.com/js/froogaloop2.min.js" in the head. And I'm using the following javascript at the bottom of the page...
<script type="text/javascript">
var iframe = document.getElementById('vimeo_player');
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
You can see my attempt here: http://walkinthedog.com/video-test/
Any help is most appreciated.
Use setVolume from the api in your vimeo embed.. player.api('setVolume', 0); it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
With the latest version, there's an even easier solution:
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var player = new Vimeo.Player(document.getElementById("vimeo_player"));
player.on('play', function() {
player.setVolume(0)
});
</script>