WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

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

タグ:

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

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

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

YOUTUBEの埋め込みコードを取得

2.HTMLとCSSを貼付ける

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

コードの貼付け

HTML

CSS

コレだけで完了です。

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