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 に答える