WEB制作、マーケティングに関する情報をお届けします。

★YOUTUBEをレスポンシブで埋め込む★コピペでOK!

YOUTUBE動画の埋込コードはそのまま埋め込みしても固定幅になっておりスマホなどでの観覧の際はサイトの仕様によって画面をオーバーしてしまったりとユーザビリティが悪いです。今回はコピペで出来るレスポンシブのコードを紹介します。

1.YOUTUBEから埋め込みコードを抽出

埋め込みたい動画を開き動画下の共有→埋め込みコード→コードをコピーします。

2.HTMLとCSSを貼付ける

下記のdivタグ内にYOUTUBEでコピーしたコードを貼付けます。

HTML

CSS

コレだけで完了です。

以上、コピペで出来るYOUTUBEのレスポンシブ対応でした。