web-dev-qa-db-ja.com

Youtube Videoをレスポンシブにする方法は？

動画サイトを作成していますが、動画をレスポンシブにしたいです。クラスを作成しました

.video {
    float: left;
    width: 90% !important;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-right: 5%;
    margin-left: 5%;
    border: 0px solid #FFF;
    height: 550px !important;
    box-shadow: 1px 1px 3px #555;

youTubeのビデオコードに与えていた、すなわち、次のようにiframeコード

<iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" class="video" allowfullscreen></iframe>

不足しているものや、このビデオの応答性を高めるその他のトリックがあれば教えてください。

youtuberesponsive-webdesignvideo-sitemap
4
Master Prons

ビデオiframeをdivで囲みます。

<div class=youtube-container>
     <iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" allowfullscreen></iframe>
</div>

CSSを使用して、そのdivをできる限り幅が広くなり、常に16：9のアスペクト比を維持するように、そのdivをレスポンシブにします。次に、CSSを使用して、YouTube iFrameがコンテナー全体を占有するようにします。

.youtube-container {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-container iframe,.youtube-container object,.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
3
Stephen Ostermiller