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

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

タグ: , , ,

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

最新情報をお届けします

米Amazon、Dush Buttonを押すたびに異なるお菓子の詰め合わせが届く「Prime Surprise Sweets」を提供中

オンライン版のDush Buttonをリリースした米Amazonですが、物理的なDash Button(ややこしい・・・)を使い、ボタンを押すたびに毎回異なるお菓子の詰め合わせが送付されてくる「Pri

GPD WINの保護シートや干渉防止ゴムの自作など、使いやすくするためにやったこと

最近ゲーム設定の話しか書いていない気がするGPD WINですが、もちろんゲーム以外でも活用していて外出時にはPC(Surface Pro 3)は持ち歩かずにGPD WINだけで済ませることが多くなって

Nintendo Switch予約開始 今回は実店舗での予約が確実そう

本日9時から予約がスタートしたNintendo Switch。 Amazonを除くオンラインショップでは軒並みサイトが重かったり、エラーになっているようです。 Amazonでは10分ほどで完売 Ama

米Amazon、1プッシュで注文できるAmazon Dush Buttonにオンライン版を追加

日本でも始まったAmazon Dush Buttonですが、米AmazonではDush Buttonのオンライン版が登場しました。 Amazon Dush Buttonは、ボタンを押すと注文が完了する

世界初のVR対応13インチゲーミングノートPC、ALIENWARE 13が日本で発売開始

DELLが世界初となる13インチのVR対応ゲーミングノートPC ALIENWARE 13を発表しました。 ALIENWAREはこれまで15インチと17インチがありましたが、今回あらたに13インチが追加

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

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

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

米Amazon、定価が$869のGoogle Pixel XL 128GBモデルを$1,510で販売中

米Amazon、定価が$869のGoogle Pixel XL 128GBモデルを$1,510で販売中

米AmazonがGoogle Pixel XL 128GBに$1510.08という価格を付けて海外サイトで話題になっています。 昨年10月に発売となったGoogleのPixel/Pixel XL...

Nintendo Switch予約開始 今回は実店舗での予約が確実そう

Nintendo Switch予約開始 今回は実店舗での予約が確実そう

本日9時から予約がスタートしたNintendo Switch。 Amazonを除くオンラインショップでは軒並みサイトが重かったり、エラーになっているようです。 Amazonでは10分ほどで完売 ...

DELL、13インチとしては世界最小のXPS 13 2-in-1を発表

DELL、13インチとしては世界最小のXPS 13 2-in-1を発表

DELLが13インチ 2-in-1なノートPCとしては世界最小となるXPS13 2-in-1を国内で発表し発売を開始しました。 20日の夜にアフィリエイター向けの製品発表会があり、それに参加して...

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

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

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

MENU

back to top