Question

我正在构建一个显示Youtube视频频道视频的页面。

这就是我的代码的外观。

当显示视频时，它们位于我的CSS / Javascript菜单上方。

我尝试了z-index和position：relative但它没有帮助。在堆栈溢出时，我发现另一个sollution http://youtubelink，最后＆amp; wmode = opaque，但它没有帮助。

也许有人可以给我一个正确的溶剂。感谢。

守则

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

但没有改变。

Answer 1

我想我找到了解决这个问题的方法here。它涉及将?wmode=transparent放入视频网址。

因此，如果i帧代码是：

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

这仅适用于简单的YouTube iFrame网址，没有任何额外参数。对于包含额外参数的网址，请添加&wmode=transparent

因此，如果i帧代码是：

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

Answer 2

我在joomla中嵌入了youtube视频，视频是重叠菜单。这是我的代码。

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

然后我只是将？wmode = transparent 后缀添加到src代码中。它解决了这个问题。

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

您也应该尝试这一点，我希望这能解决您的问题。

Answer 3

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

这解决了这个问题。

Answer 4

我在YouTube视频下显示的CSS弹出窗口遇到了同样的问题。我发现this tutorial“？wmode = transparent”方法对我有用。我正在使用Sharepoint设计网站并在IE9和Chrome中查看。

Youtube视频浮动在我的菜单上

4 个答案: