1

我正在尝试嵌入一个 youtube 视频，但让它看起来像它在电视图像上。它在 IE 中看起来像我想要的那样，但在 Firefox 和 Google Chrome 上却没有。

#youtubeBG img {
    display:block;
    text-align:center;
    width:100%;
    margin:0 auto;
    position:relative;

}
<div id="youtubeBG" style="width:1000px; height:700px; text-align:center;"><img       src="images/4.png"/>
<span class='embed-youtube' style='text-align: left; display: block; position: absolute; top: 305px; left: 382px; width: 786px; height: 514px;'>    <iframe class='youtube-player' type='text/html' width='750' height='528.3' src='' frameborder='0'></iframe>
</span></div>
4

1 回答 1

0

您正在添加许多不必要的样式来实现您想要的。通常 width:100% 不是一个好主意，因为每个浏览器似乎都以自己的方式计算和呈现它。

这是我的建议： http: //fiddle.jshell.net/iGanja/PJwD2/

您会注意到我添加了边框以供视觉参考，因为我没有您的图像可用。您基本上需要调整 -20px 以匹配您的背景图像。

希望这可以帮助。

#youtubeBG img {
    display:block;
    margin:0 auto;
}

<div id="youtubeBG" style="border: 1px solid black; width:1000px; height:550px; text-align:center;">
    <img src="images/4.png"/>
    <div class='embed-youtube' style='border: 1px solid red; width: 786px; height: 514px; margin:-20px auto;'>
        <iframe class='youtube-player' type='text/html' width='750' height='528.3' src='' frameborder='0'></iframe>
    </div>
</div>
于 2013-04-25T16:07:36.723 回答