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

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

タグ: , , ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

レビュー >その他

実写版「美女と野獣」、王子さまは野獣のほうがイケメンな気が・・・

4月21日から公開されているディズニー映画「美女と野獣」を観てきました。実は原作、アニメを含め、美女と野獣を観るのはこれが初めて。周りはカップルや女性ばかりだったので、実はおっさんが1人で見る映画ではないのかもしれません ...

News >モバイル

HTC、5月16日のフラッグシップ発表会の告知サイトを日本でもオープン。ライブストリーミングで配信予定

先日、紹介したHTCの発表会予告ですが、HTC Japanもライブ配信を行うということで特設ページをオープンしました。 関連:HTC、側面にセンサを搭載するHTC Uを5月16日に発表。 – Dream Seed 「かつ ...

News >モバイル

iPhoneをマッキントッシュ風にするスタンド「W4 STAND」。ただしそれ以上の機能はありません。

Apple Watchを初代マッキントッシュ風にする充電スタンド「W3 STAND」を発売しているelagoが、今度はiPhoneをクラシカルなマッキントッシュ風にするスタンド「M4 Stand」を発表しました。 シリコ ...

雑記

使ってみた? Android 7.0のGalaxy S7 edgeで利用できる「セキュリティフォルダ」

先月から開始されている国内Galaxy S7 edge向けのAndroid 7.0へのアップデート。そのアップデートにより「セキュリティフォルダ」という新しい機能が利用可能になっています。 プライベートなデータを守る「セ ...

Amazon、最大3000円オフになる「IIJmio × SIMフリースマホ セット割特集」開催中

Amazonで格安SIMとSIMフリースマートフォンのセットが最大で3000円割引になる「【最大3,000円OFF】IIJmio × SIMフリースマホ セット割特集」を開催しています。SIMはIIJmioとBIC SI ...

MENU

back to top