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

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

目次
スポンサーリンク

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

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

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

はいこれ。

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

やり方

.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のバックアップは例のごとくとってね。

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

いいかい?
超関連記事

一緒に読んで欲しい記事