水泳の試合結果を報告する上で、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の埋め込みコードを持ってきます！
で、テキストモードにしてこのコードを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埋め込みのレスポンシブル対応が完了です。
