i need to show a popup when youtube video finish it works fine for the alert() but when i tried to make magnific popup instead if the alert it dosen't work here is my code
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '600',
width: '600',
videoId: 'id',
playerVars: { 'autoplay':"0", 'controls':"1" },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
function onPlayerReady(event) {
playerReady = true;
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED ) {
$.magnificPopup.open({
items: {
src: 'mylink to the pic'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0); }
}
</script>
Related
Im trying force autoplay when the youtube video is ready.
<html>
<body>
<div id="player"></div>
<br/>
<button id="botaoPlay" onclick="playMusic()">play</button>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var timeout = null;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '8t3EHHhkC34',
playerVars: { autoplay: 1 , enablejsapi: 1, playsinline: 1, origin: 'http://localhost' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(65);
if(!timeout)
timeout = setInterval(playMusic, 1000);
}
function playMusic() {
if (player) {
player.playVideo();
}
}
function onPlayerStateChange(event) {
console.log("status changed: " + player.getPlayerState());
if( player.getPlayerState() == 1 ){
clearInterval(timeout);
}
}
</script>
</body>
</html>
But the video only starts if i click on button... how can i start the video? I tried instead call playVideo() in interval, call button.click() but didnt work too, only if i click with mouse in button. How can i start my video without click on button?
I want to play another video, which I will get from my database, but I try it with some sample, which is not working at all, here is my sample code:
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady(id) {
if (id == null) {var t = '0Bmhjf0rKe8';}
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: t,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
// Here I want to call function again, function executes, but video will not played
onYouTubePlayerAPIReady('yeDkcSZta2Y');
}
}
There you can see, when video ends I call onYouTubePlayerAPIReady() with new video ID, it executes as well, but video do not play. I think it will be because the onPlayerReady() do not executes, or something.
How to fix this, or what change to work it properly?
Here is an example that works. Call queueVideo() to load a string containing comma separated video ids of all the videos that you want to play or just one video. When there are no video left in the queue, this plays the default video '0Bmhjf0rKe8'. I never use onPlayerReady(). In fact, if I remember correctly, it was never called so I implemented using the technique shown below.
<script type="text/javascript">
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//
// Replaces the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
var videosQueuedCount;
function onYouTubePlayerAPIReady() {
videosQueuedCount = 1;
var vars = {
autoplay: 1,
enablejsapi: 1,
controls: 1
}
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars: vars,
videoId:'0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
}
function playVideo(VID) {
window.top.scrollTo(0,410);
videosQueuedCount = 1;
player.loadVideoById(VID);
}
function queueVideo(queuedCount,VID) {
window.top.scrollTo(0,410);
videosQueuedCount = queuedCount;
player.loadPlaylist(VID);
player.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
videosQueuedCount -= 1;
if (videosQueuedCount < 1) {
videosQueuedCount = 1;
playVideo('0Bmhjf0rKe8');
}
}
}
</script>
<div class="video-container"><div id="ytplayer"></div></div>
I am using the YouTube Iframe as shown below. I want to make my player load on the click of a button instead as soon as the API loads.
I have created a system where a user of my website will be able to choose what videos will be loaded into the playlist, so I cannot hardcode the YouTube video IDs. Is it possible to make an onclick function that fires an event that loads the player? If so, how??
Thanks so much!!!
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: { //CAN I REPLACE THE ONREADY EVENT WITH ONE
'onReady': onPlayerReady, //THAT FIRES ONCLICK?
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
You can do something like code below
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var video_id = '' //Desired video ID
var player;
$('LOAD_BUTTON').on('click', function() {
// Load player when LOAD_BUTTON is clicked
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video_id,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
function onPlayerReady(event) {
$('PLAY_BUTTON').on('click', function() {
// Play video when PLAY_BUTTON is clicked
event.target.playVideo();
});
}
so I'm using the Youtube iFrame API to give me an alert when the video stops playing with the following code:
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
playerVars: {
'autoplay': 1,
'controls': 1,
'html5': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
alert('done');
}
}
I tried this same code on jsfiddle: (http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/) and it works fine there. Doesn't work on my local machine though. Any ideas?
I'm trying to set up an array of videoId's to be able to choose from to be randomly loaded. I tried to add the videos array as a videoId, and it didn't work. I'm kind of a JS newb, so I'm not really sure what it is I should be passing back for this. I got as far as this:
<div id="player"></div>
<script>
function rotateYT() {
var videos = [
'ZMnjkcvjN-E',
'RFQfSMbLCWw',
];
var index=Math.floor(Math.random() * videos.length);
}
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '300',
width: '300',
videoId: videos[index], //where I'm trying to get the random videos
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
event.target.mute();
event.target.setPlaybackQuality('small');
}
</script>
The function needs to return the selected video ID:
function rotateYT() {
var videos = [
'ZMnjkcvjN-E',
'RFQfSMbLCWw',
];
var index=Math.floor(Math.random() * videos.length);
return videos[index];
}
Then you need to call it in onYouTubeIframeAPIReady:
function onYouTubeIframeAPIReady() {
var videoID = rotateYT();
player = new YT.Player('player', {
height: '300',
width: '300',
videoId: videoID,
events: {
'onReady': onPlayerReady,
}
});
}