Youtube embed trouble with chrome - html

Question

I am using this code
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block';
this.style.display='none'">
<img src="../img/film.jpg" style="cursor:pointer" />
</div>
<div id="thevideo" style="display:none">
<iframe width="600"
height="335"
src="https://www.youtube.com/embed/MZ-NmMMTyTU?&rel=0&theme=light&showinfo=0&disablekb=1&hd=1&autohide=1&color=white&autoplay=1"
frameborder="0"
allowfullscreen>
</iframe></div>
</div>
To embed a YouTube video on my site, and it is working fine in Firefox. But in Chrome the video starts playing, behind the image i have placed on top.
Any ideas how to fix this?

Answer 1

I just made one YouTube handler, with Javascript API.
HTML code:
<b id="youbox" class="youbox youbox-left">
<div id="player"></div> <!--player will loads here-->
</b>
<div id="youtube-select" class="youtube-select clearfix">
<ul>
<!-- use this part as a dynamic block, so you can multiply this -->
<li class="playanothervideo {ACTIVE}" rel="{YOUTUBE VIDEO ID}">
<h1>{TITLE OF VIDEO}</h1>
</li>
<!-- end of dynamic block. important: at the dom ready you have to make one li active, because that will be the first loaded video -->
</ul>
</div>
The javascript
if (($("#youbox").size() > 0)) // if you have youbox, which means you want a youtube player
{
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player; // insert youtube player api to the html source, and make a player instance
function onYouTubePlayerAPIReady() // on youtube player api loaded
{
player = new YT.Player('player', {
height: '350', // height of player
playerVars: { 'color': 'white', 'theme': 'light', 'modestbranding': 1, 'rel':0, 'showsearch':0, 'showinfo': 0, 'iv_load_policy': 3, 'hd': 1, 'controls':1}, // personalize players lookout (this is white instead of red)
width: '629', // width of player
videoId: $("#youtube-select li.active").attr("rel"), // aye, this is the first video id's getter
events:
{
'onReady': onPlayerReady, // the easiest event handling, calls onplayerready fn
}
});
}
function playAnotherVideo(id) // play another video event handler
{
if (player.getPlayerState() == 1) // if video is playing
{
console.log("playerstate ok")
player.stopVideo(); // stops video
player.loadVideoById(id); // load other
player.playVideo(); // starts other
}
else
{
player.cueVideoById(id); // if not playing just loads the other video's thumbnail
}
}
function onPlayerReady(event)
{
event.target.setPlaybackQuality("hd720"); // setting 720p resolution by default (it's not tested yet, sorry)
}
}
and from an other js, but can apply to the first:
$(".playanothervideo").live("click", function(){
playAnotherVideo($(this).attr("rel"));
pickMe($(this), "active");
});
function pickMe(e, c) {
e.siblings(e[0].tagName).removeClass(c);
e.addClass(c);
}
which select the videos and handle their active class.
Good luck with Youtubein. :)
For more informations check: https://developers.google.com/youtube/js_api_reference