Question

我的页面中嵌入了Youtube HTML iframe，这是代码：

<iframe src="http://www.youtube.com/embed/gI2eO_mNM88?rel=0&amp;autohide=1&amp;color=white&amp;showinfo=0&amp;theme=dark&amp;wmode=transparent&amp;hd=1" width="470" height="264" frameborder="0" allowfullscreen webkitAllowFullScreen></iframe>

如果我按下播放，我会在IE9 + 8中获得一个虚线1px轮廓。我在CSS中有这个：

embed,
object {
  outline: 0;
  overflow: hidden
}

但这似乎没有帮助。它没有在Chrome或FF中获得大纲（两个最新版本）。我也尝试将iframe放在一个与iframe具有相同尺寸的div中并给出div溢出：隐藏，但也没有运气。

Answer 1

我为这个案例创造了一个小提琴：http://jsfiddle.net/keaukraine/UmTZy/

如您所见，大纲显示在iframe元素中。您不能影响iframe中元素的样式，因为它超出了您的网页范围。

一个相当丑陋的解决方案是将iframe置于隐藏1px轮廓的方式。我把它放在稍微小一点的div中并定位它以便隐藏这个轮廓。如果这个解决方案对你来说没问题，你可以在这个小提琴中看到它：http://jsfiddle.net/raQEH/

Answer 2

将您的iframe设为id =“iframe”，然后尝试：

#iframe:active, #iframe:focus {
   border: none;
   outline: none;
}

Answer 3

如果大纲不起作用，请尝试border:0;。

Answer 4

我刚刚在youtube开发论坛上发布了这个问题。希望他们能从他们的网站上解决这个问题

https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/gqt_G5d8HYM%5B1-25%5D

Youtube HTML5 iframe嵌入在IE中播放了大纲

4 个答案: