Youtube嵌入式视频,标题重叠

时间:2013-01-03 15:14:50

标签: iframe youtube youtube-api z-index

我的youtube视频中的标题与视频标题中的共享和更多信息按钮重叠。如果您将鼠标悬停在视频上,则标题会正确压缩。

摆弄这个例子: http://jsfiddle.net/QpckF/

这是我的代码:                      

       <div class="interior-container">
            <h3 id="video-text">Why Book with Rail Europe?</h3>    
        <iframe frameborder="0" name="player" allowfullscreen="" id="player" title="YouTube video player" height="217" width="365" src="http://www.youtube.com/embed/wV-S_MOusMI?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1&amp;origin=http://www.raileurope.com"></iframe> 

              <div class="vid-arrows prevvid">
              <i class="vid-prev icon-video-left-arrow"></i>
              </div>
              <div class="vid-nav">
            <a target="player" data-text="Why Book with Rail Europe?" class="fader first active" href="http://www.youtube.com/embed/wV-S_MOusMI?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1&amp;origin=http://www.raileurope.com" id="default"></a>            
        <a target="player" data-text="Train Travel in Europe: Rail Pass vs. Tickets" class="fader first" href="http://www.youtube.com/embed/rxlq8KirhNM?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1&amp;origin=http://www.raileurope.com" id="default"></a>            
        <a target="player" data-text="Why Travel by Train in Europe?" class="fader first" href="http://www.youtube.com/embed/pQ8DwmEg9wk?controls=1&amp;showinfo=1&amp;modestbranding=0&amp;wmode=opaque&amp;enablejsapi=1&amp;origin=http://www.raileurope.com" id="default"></a>            
        </div> <!-- end vid-nav -->




        <div class="vid-arrows nextvid">
              <i class="vid-next icon-video-right-arrow"></i>
              </div>
        </div>        
    </div>​

这是youtube或我的代码的问题吗?

由于

2 个答案:

答案 0 :(得分:1)

试验和错误测试似乎表明这只是Youtube Flash播放器中的一个界面错误 - 它不会在触发鼠标悬停事件之前正确截断标题。

我发现的一些其他界面问题;当一个视频的宽度小于350px时,那些“共享”和“更多信息”按钮甚至都不会由flash播放器呈现,所以问题只会在超过350px但不到需要的情况下才会出现。有完整的标题可见。

此外,如果视频的高度小于201像素,则底部的控制条将不会自动出现(以节省空间);但是当没有控制栏时,鼠标悬停不能触发标题连接,直到视频开始播放。

轻微的烦恼,但只是在少数情况下出现,所以不知道他们有多大的优先权。您可以尝试报告错误(或查看其他人是否已经存在)。

答案 1 :(得分:0)

我遇到了同样的问题。您还可以在网址中添加“showinfo = 0”,它根本不会显示标题。