Reputation: 1076
I'm building a page where my Youtube video channel videos will be displayed.
This is how my code looks.
When the videos are displayed, the are positioned above my CSS/Javascript menu.
I tried z-index and position:relative but it didn't help. At stack overflow I found another sollution http://youtubelink and at the end &wmode=opaque but it didn't help.
Maybe someone can give me a right sollution. Thanks.
The Code
<div style="width:190px; float:left; margin:0 20px 20px 0;">
<?php if($item->type == 0) { // If video type is Youtube ?>
<p class="video"><iframe width="190" height="142" src="<?php echo $item->link; ?>" frameborder="0" allowfullscreen></iframe></p>
<p class="video-title"><?php echo $item->title; ?></p>
<?php if(!empty($item->desc)) { ?>
<div class="video-desc"><?php echo $item->desc; ?></div>
<?php } ?>
Update:
I included this code in the <head>
tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
//<object id='SWFUpload_0'><param name='wmode' value=transparent></param></object>
$('object#SWFUpload_0>param[name=wmode]').attr("value","transparent");
//<!--[if IE]><object id='SWFUpload_0'><embed name='wmode' value=transparent></embed><![endif]-->
if(!$.browser.msie)$('object#SWFUpload_0').append('<embed wmode="transparent">');
});
</script>
but nothing changed.
Upvotes: 0
Views: 2319
Reputation: 31
I embedded youtube video in joomla, and video was overlapping menu. This is my code.
<iframe width="460" height="259" src="//www.youtube.com/embed/2fgLRBismS8" frameborder="0" allowfullscreen></iframe>
Then I just added ?wmode=transparent suffix to the src code. And it solved the problem.
<iframe width="460" height="259" src="//www.youtube.com/embed/2fgLRBismS8?wmode=transparent" frameborder="0" allowfullscreen></iframe>
You should try this too, I hope this will solve your problem.
Upvotes: 2
Reputation: 315
I think I found a solution to this problem here.
It involves putting ?wmode=transparent
in the video URL.
So if the i-frame code is :
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM” frameborder=”0″ allowfullscreen></iframe>
Make it the following:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>
This only works with a simple YouTube iFrame URL, one without any extra parameters. For a URL with extra parameters, add &wmode=transparent
So if the i-frame code is:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&hd=1″ frameborder=”0″ allowfullscreen></iframe>
Make it the following:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&hd=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>
Or to be safe replace the ampersand:
<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?rel=0&hd=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>
Upvotes: 3
Reputation: 11
I had the same issue with my CSS flyout showing under YouTube videos. I found this tutorial The "?wmode=transparent" method worked for me. I am using Sharepoint to design the site and viewing it in IE9 and Chrome.
Upvotes: 1
Reputation:
I had the same problem at SWFUpload flash button:
//<object id='SWFUpload_0'><param name='wmode' value=transparent></param></object>
$('object#SWFUpload_0>param[name=wmode]').attr("value","transparent");
//<!--[if IE]><object id='SWFUpload_0'><embed name='wmode' value=transparent></embed><![endif]-->
if(!$.browser.msie)$('object#SWFUpload_0').append('<embed wmode="transparent">');
this solved the problem.
Upvotes: 1