Menu
I want 2 simple buttons to play and stop a YouTube video. I tried something like this with jQuery and doesn't work.
http://codepen.io/anon/pen/Carwu
http://jsfiddle.net/8kN6Z/34/
$(function(){
$("#video").hide();
$("#escolta").click(function() {
video.playVideo();
//$("#video").playVideo();
//$("#video").trigger('play');
//$(".player").playVideo()
});
$("#pausa").click(function() {
video.stopVideo();
//$("#video").trigger('pause');
});
});
CSS:
#escolta,#pausa{ font-family: Tahoma;letter-spacing:1px;font-size:11px;color: #666;width: 80px;text-align: center;height: 20px;line-height: 20px;background-color: #ccc;cursor: pointer;}
#escolta {position:absolute;top: 20px;left:20px;}
#pausa{position: absolute;top:20px;left: 150px;}
#pausa{position: absolute;top:20px;left: 150px;}
#video{position:absolute;top:100px;left:20px;}
HTML:
<div id="escolta">escolta</div>
<div id="pausa">pausa</div>
<iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/4G1mundpq-Q?rel=0" frameborder="0" allowfullscreen></iframe>
813
I revisted this one. Figured out some of the problems you were having.
Look at it working on JSFiddle http://jsfiddle.net/8kN6Z/33/
Here is what you did wrong:
You weren't loading the Youtube Player API. Which you have to do manually even if you are using an iframe.
You weren't creating a function named onYouTubePlayerAPIReady.
You weren't creating an YT.Player object for your frame and setting the onReady event handler for that YT.Player object to your onPlayerReady function.
You didn't wait until inside your onPlayerReady callback function to set your click event handlers to the ready YT.Player object.
You set the Javascript API on JSFiddle to Mootools and then used CSS selector syntax with $('#id'). $$('#id') works with mootools but $('id') is the correct Mootools syntax. $('#id') is jQuery.
You wrapped the javascript in the onLoad method. Which doesn't work.
The YouTube Player API setup and function definitions needs to be defined at the top level.
The biggest problem is the missing type="text/html" and src scripting parameter &enablejsapi=1 property in the iframe tag. Without those none of the scripting works.
On Codepen you are using jQuery so this solution would have to be transliterated.
Problems I encounter with Mootools: $('video').hide() doesn't work. Creating a .hideme class with display:none and calling $('video').addClass('hideme') at the end of the onPlayerReady callback function works just fine.
JS Fiddle working example
HTML:
<body>
<div id="escolta">escolta</div>
<div id="pausa">pausa</div>
<iframe id="video" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/4G1mundpq-Q?rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</body>
CSS:
#escolta, #pausa {
font-family: Tahoma;
letter-spacing:1px;
font-size:11px;
color: #666;
width: 80px;
text-align: center;
height: 20px;
line-height: 20px;
background-color: #ccc;
cursor: pointer;
}
#escolta {
position:absolute;
top: 20px;
left:20px;
}
#pausa {
position: absolute;
top:20px;
left: 150px;
}
#pausa {
position: absolute;
top:20px;
left: 150px;
}
#video {
position:absolute;
top:100px;
left:20px;
}
.hideme {
display:none;
}
JS:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
$("escolta").addEvent('click', function () {
event.target.playVideo();
});
$("pausa").addEvent('click', function () {
event.target.stopVideo();
});
$('video').addClass('hideme');
}
Updated info for jQuery follows:
I saved a new tested working jQuery jsfiddle http://jsfiddle.net/8kN6Z/47/
The only change is the two lines where the buttons are selected by id in the javascript portion. The rest of the javascript is using the javascript built in DOM methods.
JQuery JS:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event){
event.target.playVideo();
$("#escolta").on('click', function() {
player.playVideo();
});
$("#pausa").on('click', function() {
player.stopVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
