WordPressで記事内に貼り付けたビデオの幅の調節に苦しんでいるなら取り入れるべきCSS技

最近困ったことはプラグインとCSSが大抵解決してくれると思ってます

ほんとにプラグインとCSSは知らないと損することがてんこ盛りでね。「てんこ」って何よ@shintarowfreshです。

貼り付けるビデオの幅、変更できるって知ってますか？
とりあえず、コンテンツの横幅一杯になってくれたら便利だと思いませんか？

はいこれ。

YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 ｜ HTML5 – CSS3 mag
YoutubeやHTML5video等の埋め込み動画のサイズをcssを使って動的にリサイズ/可変にするトリックをご紹介します。 解像度の違うスマートフォン（iP …

スマホでも余裕で対応してくれるので、神っぷりがすさまじいですね。

やり方

.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%;
}

こういうCSSを書き加えます。

それから

<div class="video-container">
youtubeとかの貼り付けコード
</div>

video-containerのクラスの＜div＞で囲むだけ。
なんてことない変更ですが、威力抜群です。

お手軽技

しましまあ、毎回こんな＜div＞書いてられるかというのが人情ですね。

楽しましょうよ。

AddQuicktag

WordPress › AddQuicktag « WordPress Plugins

ご存じ超絶優秀なプラグインですを使えばこんな＜div＞毎回手書きで書く必要などないのですよ。

とりあえずAddQuicktagにビデオ用のあたらしいタグを登録しましょう。

僕の場合はこんな感じ。

使い方は
<iframe src="youtubeの貼り付け用コード" width="800" height="450" frameborder="0"></iframe>
を全選択した状態で

事前に登録したタグを発動させれば

<div class="video-container"><iframe src="youtubeの貼り付け用コード" width="800" height="450" frameborder="0"></iframe></div>

一撃で完成です。コンテンツの横幅ぴったりのサイズに自動で調節してくれます。
ブログのインデックスページと、個別記事ページの横幅が違う場合でも何の問題もないし、スマホでアクセスしたときの横幅が違う場合でも、CSSファイルが別でなければ自動で対応してくれます。

泣けます。

最後に

ビデオはブログの滞在時間を延ばしてくれる優秀なコンテンツなのでうまいこと取り入れたいですよね。美観を損ねないように。

困っている人はお試しあれ。
CSSのバックアップは例のごとくとってね。

文：シンタロヲフレッシュ

はてブ

pocket

twitter