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

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

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

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

やり方。

超簡単でした。

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

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

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

youtube_埋め込み

 

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

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

Sponsored Link

SNSでもご購読できます。