web-dev-qa-db-ja.com

自動サイズ変更YouTube埋め込みビデオ

私は埋め込まれたYouTubeのビデオに重点を置いてウェブサイトを構築していますが、埋め込みコードでは幅を1つしか指定できません。これは、モバイルレスポンシブ全体の問題になります。従う。

だから、画面の幅だけに基づいてビデオの寸法を変更することは可能ですか、それともCSS @Screenモードですか？

これは完全にレスポンシブな幅ではありません... 400pxでフルビデオを再生し、0pxでモバイルを表示したいのが理想です。

オプションは何ですか？

mobilevideoresponsive-webdesignembed
1
Unhappy Blogger

これを試すことができます：

埋め込みコードから高さと幅を削除し、divクラスの間に配置して、次のようにiframeにクラスを追加します。

    <div class="youtube">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

次に、CSSでこれを行う必要があります。

//this goes to the embed container div class
.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

//the class you give to the iframe
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

。youtubeクラスの幅は100％で、パディングの底は56.25％です。この割合は9/16の結果です（このビデオでは16：9の解像度を使用しているため）。必要な解像度に応じて、パディングの下部の割合を調整できます。

このサイト でこれに関する詳細情報を見つけることができますが、このコードは動作するはずです

2
franfernandz