wordpress

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を付けた場合にかぶってしまうのでこのようにしました。

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

タグ: , , ,

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

最新情報をお届けします

ワンダーコア スマート

倒れるだけで腹筋運動が出来る「ワンダーコア スマート」は見た目以上にハードで効果ありそう

リンクシェア経由でショップジャパンから倒れるだけの腹筋マシーン「ワンダーコア スマート」を提供頂きました。 剛力彩芽さんのCMでおなじみのアレです。 コンパクトサイズのワンダーコア スマート 同じシリ

HUAWEI Matebook

12月10日限定 HUAWEI Matebookが64,800円の特価で販売中

AmazonのCyver Mondayセール、12月10日の特選タイムセールとしてHUAWEIのMatebookが39%の64,800円となっています。 64,800円になっているのはメモリ4GB、ス

Sony XAV-AX100

SonyのAndroid Auto、Car Play対応メディアレシーバー XAV-AX100が米Amazonで販売中 日本への発送にも対応

GoogleのAndroid Auto、AppleのCar Playに対応したカーオーディオ、Sony XAV-AX100が米Amzonで販売されています。 日本への発送も可能です。 Sonyのカーオ

Kodak Ektra

デジカメスマートフォン Kodak Ektraがドイツで販売開始 英Cloveには12月14日に入荷予定

Kodakの21MPカメラを搭載したデジカメスマートフォン、Ektraの販売がドイツで開始されました。 関連:KODAKのデジカメスマートフォン、EKTRAは12月9日にドイツで発売 – Dream

GooglePlay

Google、クリスマスプレゼントとして100円分のクレジットを配布中

Googleがクリスマスプレゼントとして、Google Playでビデオレンタルやアプリ購入に使えるクレジット100円分をメールで配布しています。 Google Playのクーポンは全員に配布されるわ

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

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

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

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

Google、クリスマスプレゼントとして100円分のクレジットを配布中

Google、クリスマスプレゼントとして100円分のクレジットを配布中

Googleがクリスマスプレゼントとして、Google Playでビデオレンタルやアプリ購入に使えるクレジット100円分をメールで配布しています。 Google Playのクーポンは全員に配布さ...

12月10日限定 HUAWEI Matebookが64,800円の特価で販売中

12月10日限定 HUAWEI Matebookが64,800円の特価で販売中

AmazonのCyver Mondayセール、12月10日の特選タイムセールとしてHUAWEIのMatebookが39%の64,800円となっています。 64,800円になっているのはメモリ4G...

MENU

back to top