ブログやサイト内にYouTube動画を埋め込む際、元のコードをそのまま貼るとサイズが固定されてしまいます。

そこで、ブログの記事幅に応じて伸縮するレスポンシブ用のコードに書き換えることで、埋め込み動画がより視聴しやすくなります。

コピペ使用OKです。簡単なのでお試しください。

YouTube動画埋め込みをレスポンシブ対応させるコード

元のYouTube埋め込みコード

<iframe width="560" height="315"
src="https://www.youtube.com/embed/(動画のID)"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>


書き換えたコード(赤字:修正した部分)

<div style="position: relative; padding-top: 56.25%;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/(動画のID)"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>

動画のIDは動画URLの末尾で確認できます。
(https://www.youtube.com/watch?v=○○○○○○←この部分)

上記の書き換えたコードをコピペして、動画のIDを貼り付けるのが一番手っ取り早いと思います(´∀`)
ご活用くださいませ。

YouTube埋め込みをレスポンシブに対応させるコード【コピペOKです】

ブログやサイト内にYouTube動画を埋め込む際、元のコードをそのまま貼るとサイズが固定されてしまいます。

そこで、ブログの記事幅に応じて伸縮するレスポンシブ用のコードに書き換えることで、埋め込み動画がより視聴しやすくなります。

コピペ使用OKです。簡単なのでお試しください。

YouTube動画埋め込みをレスポンシブ対応させるコード

元のYouTube埋め込みコード

<iframe width="560" height="315"
src="https://www.youtube.com/embed/(動画のID)"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>


書き換えたコード(赤字:修正した部分)

<div style="position: relative; padding-top: 56.25%;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/(動画のID)"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>

動画のIDは動画URLの末尾で確認できます。
(https://www.youtube.com/watch?v=○○○○○○←この部分)

上記の書き換えたコードをコピペして、動画のIDを貼り付けるのが一番手っ取り早いと思います(´∀`)
ご活用くださいませ。

次に読まれている記事