0

応答性の高い背景があり、その背景の上に YouTube ビデオを表示したい (全幅ではない)。

ここで私はそれをやってみました。

http://jsfiddle.net/audetwebdesign/EGgaN/#run

HTML:

<div class="bg-image">
            <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
             <iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
        </div>

CSS:

.bg-image {
position: relative;
}  
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
4

2 に答える 2

5

これは、画像を背景として持つフィドルからフォークされたjsfiddleであり、レスポンシブなYouTubeビデオが中央にあります。画像を作成するposition:absoluteと、通常の流れから外れて、埋め込まれたビデオが一番上にとどまることができます。

レスポンシブ ビデオ コードの秘訣は、埋め込まれたビデオを最大幅のコンテナにラップし、パディングを追加してビデオの適切な縦横比を維持することです。次に、iframe、object、およびembded要素がすべてそのコンテナーの幅の 100% に収まるようにしながら、ネイティブ サイズよりも高くならないようにします。

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    max-height: 320px;
}

http://jsfiddle.net/QRkL9/

上記のコードの詳細 - http://avexdesigns.com/responsive-youtube-embed/

于 2013-07-03T19:29:32.583 に答える
0

braican は正しいですが、ビデオ コンテナーの 56.25% により、ビデオの後に多くのパディングが残ります。余分なパディングを非表示にするには、最大高さが 320px の別の div 内にすべてをラップし、overflow:hidden にするだけです。

于 2016-06-22T12:56:12.743 に答える