Youtube埋め込みをレスポンシブルにする方法

水泳の試合結果を報告する上で、Youtubeの埋め込みが必要だったのですが、幅が合わない！！

既存のものだと、PCでは小さく、スマホだとでかいという状況になってしまいました。

今回はこれを解決していきたいと思います。

やり方。

超簡単でした。

CSSに以下を記述しましょう。

.move{
position:relative;
width:100%;
padding-top:56.25%;
}
.move iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

これが、moveというクラスをレスポンシブルにするよーという指示。

で、Youtubeの埋め込みコードを持ってきます！

youtube_埋め込み

 

で、テキストモードにしてこのコードをdiv classで囲んであげます。こんな感じ。

<div class="move">
<iframe width="640" height="360" src="https://www.youtube.com/embed/Yms9lvk-0s8?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

これで、Youtube埋め込みのレスポンシブル対応が完了です。