WordPressに貼ったYoutube動画をCSSのみでレスポンシブにしてみる

2013.5.8 (更新日:2016.03.02)
wordpress

いままであまり気にしていなかったのですが、このサイトでYoutubeなどの動画を貼った記事をスマートフォンで見たときに、動画が綺麗に収まらないという状態になっていました。

youtube

実際には綺麗に収まらないのではなく、上下に無駄に黒いスペースが発生するという状態。これはCSSで「width:100%」を指定していたためです。このせいで横幅だけは可変になっていたのですが、縦幅は変わらず、結果として無駄なスペースが発生していました。

これを修正するにはfitvidsというjQueryを使うと簡単なのですが、あまり余計なスクリプトを読ませるのも嫌だったので、CSSのみで対応してみました。

CSSだけで動画をレスポンシブにする

ネットで調べるといくつか書き方が見つかったのですが、今回は一番わかりやすかった下記を参考にしました。

YouTubeなどiframe要素をレスポンシブデザイン対応する方法 | nishi19 breaking news

CSSの記述はほぼそのまま下記のようにしました。

#vid {
    position:relative;
    width:100%;
    padding-top:56.25%;
}

#vid iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

挿入するYoutubeの埋め込みコードは下記のように<div id=”vid”>で囲みます。

<div id="vid">
    <iframe width=~   >
</div>

これだけでのことで貼り付けたYoutubeの動画がレスポンシブになります。

youtube

jQueryを使って過去記事も対応する

さて、新規に投稿するものはこれで構いませんが、過去に投稿した記事にある動画は#vidで囲まれていないのでレスポンシブにはなりません。一つずつ手で修正していってもいいのですがあまりにも面倒なので、結局jQueryに頼ります。

jQuery(document).ready(function(){
        jQuery(".content>p>iframe").wrap("
"); });

「”.content>p>iframe”」の部分は「”iframe”」だけでも良かったのですが、手動で#vidを付けた場合にかぶってしまうのでこのようにしました。

これで過去記事の動画もレスポンシブになりました(なったはず。全部は確認してないですけど……)。

タグ: , , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 TopAce Huawei Nova Lite 専用ケー

ウェアラブル翻訳機「ili」を持って台湾に行こう! ログバーがiliのモニターを募集中

話した言葉を瞬時に翻訳してくれる旅行に特化したウェアラブル翻訳機「ili」が、モニターを募集をしています。 関連:話した言葉を瞬時に翻訳!ウェアラブル翻訳機「ili(イリー)」は海外旅行をもっと身近に

あなたの一票でシリーズ化! Amazonがオリジナル作品でシリーズ化してほしいものを選ぶアンケート調査を実施中

Amazonプライムビデオで、日本未公開のAmazonオリジナル作品のパイロット版(第1話)を観て、今後その続きを観たい(シリーズ化してほしい)と思った作品を選ぶというアンケート調査を行っています。

Android O Developer Preview 1をNexus 5Xに焼いてみた 今のところ違いはよくわからない

公開されたAndroid Oの開発者プレビュー1を早速Nexus 5Xに入れてみました。正直なところ、新機能についてはまだ実感できないというか、対応しているアプリがないので試せてはいないのですが、なん

Prime Musicを聴くだけ! 抽選で5,000円のAmazonギフト券が当たるキャンペーンがスタート

AmazonがPrime Musicを聞くと2000名に5000円のAmazonギフト券が当たるというキャンペーンを開催しています。 プライム会員限定のキャンペーンですが、無料期間中でも参加OKとなっ

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEIがMWCで発表したフラッグシップ、P10/P10 Plusに続き、廉価版となるP10 liteを発表しました(ただし、HUAWEIのサイト上では確認できず、画像やスペックはGSMAre...

Androidを搭載したVAIO Phone A発表 24800円で4月7日発売

Androidを搭載したVAIO Phone A発表 24800円で4月7日発売

VAIOはWindows 10 mobileを搭載したVAIO Phone Bizを発売中ですが、同じ筐体にAndroidを搭載したVAIO Phone Aを発表しました。 発売は4月7日。VAI...

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 ...

MENU

back to top