function onYouTubeIframeAPIReady() {
alert("onYouTubeIframeAPIReady Fired"); //This works
player = new YT.Player('player', {
//height: '390',
//width: '640',
videoId: buni_php_params.videoId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert("onPlayerReady Fired"); // This doesn't
event.target.playVideo();
}
The video loads and plays.
http://wppagoda.pagodabox.com/?p=1
I have a standard wordpress install for a plugin I'm making, it fetches a videoID from database (buni_php_params.videoId) and plays it. But the event onPlayerReady is never fired.… even though onYouTubeIframeAPIReady is fired.
When I have a problem of a function not being loaded I go for the window.myFunction approach rathen than just myFunction. This proved to be more portable between browsers as well.
well i dont want to sound an idiot, but it seems like you should add "()" to your onPlayerReady in the 'onReady': onPlayerReady,
So: 'onReady': onPlayerReady(), You're calling a function after all.
I might be wrong.
Related
I am trying to make a YouTube video width change when the "onStateChange" event fires on 1(playing) and then make it come back to its original size on 0(ended) and 2(paused).
I am very new to JavaScript and jQuery. But let's say I have this
<section><iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe></section>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
why does this jquery does not work?
jQuery(document).ready(function($) {
YT.PlayerState.ENDED = function(e) {
$('section iframe').animate({ width: "50%"}, 'slow')};
YT.PlayerState.PAUSED = function(e) {
$('section iframe').animate({ width: "50%"}, 'slow')};
YT.PlayerState.PLAYING = function(e) {
$('section iframe').animate({ width: "100%" }, 'slow');
}
the API information I have got comes from here https://developers.google.com/youtube/iframe_api_reference#Events
I got the Getting Started to work, but I would like to start the video at a certain time. Here's what I've tried so far:
var player = document.getElementById('myPlayer')
player.loadVideoById({
startSeconds:2,
endSeconds:4
})
<iframe id="myPlayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com">
</iframe>
You should use it like this:
loadVideoById({'videoId': 'bHQqvYy5KYo',
'startSeconds': 5,
'endSeconds': 60,
'suggestedQuality': 'large'});
You can also use player.seekTo(seconds:Number, allowSeekAhead:Boolean) to get to a time in your video
By the way your player variable should not be the iframe, in the Tutorial it states just at the beginning that it should be invoked by this:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
You should then use onPlayerReady to do your function
I'm creating a lightbox to play videos from youtube without a plugin, so far things are going well, but now I'm having a issue, I don't know how to make the youtube video stop playing when the Lightbox is closed, here's the code
//triggering or close the lightbox
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
});
$( '#show').on('click', function(event) {
$("#lightbox, #overlay").show();
});
// This loads the iframe only on click on the Lightbox Button
var iframes = $('iframe');
$('.show').click(function() {
iframes.attr('src', function() {
return $(this).data('src');
});
});
iframes.each(function() {
var src = $(this).attr('src');
$(this).data('src', src).attr('src', '');
});
Also I don't know how to make play only the vídeo from the button I clicked, because right now when I click on a Show lightbox button it's playing all the vídeos from the page and not just the current one from the button I clicked.
Here's the Jsfiddle exemple. HTML is included on it
Try taking a look at the YouTube Player API Reference
Below I incorporated the example code from the API reference into a modified version of your JSFiddle example:
<html>
<head>
<style>
/* CSS styles removed for brevity */
</style>
</head>
<body>
<div class="left">
<button class="show">Show lightbox</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
Close
<p>Click anywhere to close the lightbox.</p>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
</div>
</div>
<div id="overlay" style="display:none">
<!-- LIGHTBOX CODE END -->
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
player.stopVideo();
});
$( '.show').on('click', function(event) {
$("#lightbox, #overlay").show();
player.seekTo(0, false);
player.playVideo();
});
// 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: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) { }
// 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) { }
</script>
</body>
</html>
Utilizing the API the above code stops the video when the lightbox is closed.
Note: I removed the second button to keep the code sample simple.
An easier way would be
$(player-selector).on("click", function()
{
$(this).html("").hide();
}
Isn't it correct?
Thank you everyone in advance.
I need some help hidding an iframe youtube video when it ends can someone guide me how to do that??
<iframe id="promo_video" src="http://www.youtube.com/embed/XzZudNOwkU8" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:228px;left:492px;" height="527" width="934" frameborder="0"></iframe>
i need something like this but i cant find how to make it
<script >
function myFunction()
{
if (promo_video.end=positive)
reload anotherother page
}
</script>
Hope this solution will work for you. The only change in solution is that you need only video id from iframe you have. Please refer the fiddle link mentioned below.
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'XzZudNOwkU8', <!-- video id should be here. last component from video URL -->
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$('#player').css('display', 'none');
}
}
</script>
Fiddle link
I am trying to pass in the iFrame object (which is a jQuery element) as a parameter for YT.Player. This unfortunately gives as error as YT.Player is expecting a raw element. I am wondering how would I be able to convert $(this) to a raw element.
$('iframe.ytplayer').each( function() {
players[id] = new YT.Player( $(this), {
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
});
this is the raw element all by itself in a jQuery .each() iteration.
$('iframe.ytplayer').each( function() {
players[id] = new YT.Player(this, {
events: {
'onReady': onReady,
'onStateChange': onStateChange
}
});
});