Youtube видео плавает над моим меню - PullRequest
0 голосов
/ 22 декабря 2011

Я создаю страницу, на которой будут отображаться видео с моего видеоканала Youtube.

Так выглядит мой код.

Когда отображаются видео, они располагаются над моим CSS/ Javascript menu.

Я попробовал z-index и position: относительный, но это не помогло.При переполнении стека я нашел другое решение http://youtubelink, а в конце & wmode = непрозрачное, но это не помогло.

Возможно, кто-то может дать мне правильное решение.Спасибо.

Код

<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 } ?>

Обновление:

Я включил этот код в тег <head>

  <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>

но ничего не изменилось.

Ответы [ 4 ]

3 голосов
/ 26 января 2012

Я думаю, что нашел решение этой проблемы здесь .Он включает в себя вставку ?wmode=transparent в URL видео.

Так что, если код i-frame:

<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM” frameborder=”0″ allowfullscreen></iframe>

, сделайте следующее:

<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ucowE8dtNqM?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Thisработает только с простым URL-адресом YouTube iFrame, без дополнительных параметров.Для URL с дополнительными параметрами добавьте &wmode=transparent

, поэтому, если код i-frame:

<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>

, сделайте следующее:

<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>

Илидля безопасности замените амперсанд:

<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>
2 голосов
/ 09 января 2014

Я встроил YouTube видео в Joomla, и видео было перекрывающееся меню. Это мой код.

<iframe width="460" height="259" src="//www.youtube.com/embed/2fgLRBismS8" frameborder="0" allowfullscreen></iframe>

Тогда я просто добавил ? Wmode = прозрачный суффикс к коду src. И это решило проблему.

<iframe width="460" height="259" src="//www.youtube.com/embed/2fgLRBismS8?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Тебе тоже стоит попробовать, надеюсь, это решит твою проблему.

1 голос
/ 17 января 2012

У меня была такая же проблема с моей всплывающей подсказкой CSS, показываемой под видео YouTube. Я нашел этот урок Метод "? Wmode = прозрачный" работал для меня. Я использую Sharepoint для разработки сайта и просмотра его в IE9 и Chrome.

1 голос
/ 22 декабря 2011

У меня была та же проблема с кнопкой SWFUpload flash:

//<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">');

это решило проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...