CODEWITHSUNDEEP
flashcssyoutube
mrGott
mrGott

Reputation: 1076

Youtube Video Floats over my menu

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

Answers (4)

user3162011
user3162011

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

Gaelen
Gaelen

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&amp;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&amp;hd=1&amp;wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Upvotes: 3

deathbunny
deathbunny

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

user669677
user669677

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

Related Questions