YouTube(動画ファイル)を記事(ブログ)に埋め込む方法

レスポンシブに対応していますので、スマホでもはみ出さずに表示されます。

記事編集画面をソースモードにして、
<iframe>***</iframe> で囲まれた埋め込み動画フレーム部分を <div class="movie-wrap"></div> と アスペクト比に合わせたインナーブロック <div class="movie-1609"></div> で囲うことでレスポンシブに対応した形で記事に埋め込むことができます。↓こんな感じです。

<div class="movie-wrap">
<div class="movie-1609">
<iframe width="854" height="480" src="https://www.youtube.com/embed/******" frameborder="0"allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>

 

16:9比率のアスペクト比の動画の場合は、<div class="movie-1609"></div>
4:3比率のアスペクト比の動画の場合は、<div class="movie-0403"></div>
とします。

<div class="movie-wrap"></div> のクラス属性には、最大表示幅などを指定します。
本サイトの場合は、最大幅600pxとしています。
幅方向センターにレイアウトしたい時は、
<div class="movie-wrap" style="margin:0 auto;"></div> などとします。

この記事へのコメント

コメントを送る


※ このアドレスに返信が送付されます。