ブログに貼り付けたYoutube埋め込み動画サイズの自動化

ブログ内に貼る、Youtube埋め込み動画サイズの自動化方法です。

1. 埋め込み動画サイズを自動化する理由
2. 手順説明
3. 参考リンク

埋め込み動画サイズを自動化する理由

ブログに動画を埋め込んだ場合、基本的には画面いっぱいで見たいと思うのが普通の考えです。

しかし、ブラウザ表示サイズによるため、常にどんなブラウザでも横幅を画面いっぱいに表示させた方がユーザビリティは良くなります。

また、サイズを自動化していないと、スマホなどの横幅が狭い媒体で見た時に、はみ出てしまう…といった事態も起きます。

手順説明

記事の横幅に自動的に動画を合わせる方法は意外に簡単。
Youtube動画など、ifrmeで出力してるものなら適用可能です。

方法は、まず以下のようなdivで挟みます。

<div class="video-container">
【ここに動画貼り付けコードを貼る】
</div>

さらに、CSSに以下のタグを貼り付けます。

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

これでOK。

上記のdivでコードを挟めば、そのブログではすべてサイズが自動化されると思います。