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

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

タグ: , , ,

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

最新情報をお届けします

HUAWIE novaとnova lite発表 若者向けアピールのミドルクラス 2月24日発売

HUAWEI Japanが日本市場向けにHUAWEI nova、nova Liteを発表しました。 どちらも2月24日に発売となります。 若者向けのnovaとnova lite 「日本市場向けに」とい

Amazon、音声リモコンが標準装備になった新型Fire TV Stickの予約を開始 4月6日発売

Amazonが新型Fire TV Stickの予約受付を開始しました。 発売は4月6日、価格は4980円です。 この新型、米国では昨年10月に発売されていますが、大きな変更点として、パーソナルアシスタ

3(さ)月10(と)日は「たけのこの里の日」に オリジナルVRゴーグルが当たるキャンペーンを2月28日から開始

3月10日は「さ(3)と(10)の日」ということでたけのこの里の記念日になったそうです。 たけのこの里と言えば、きのこの山ですが、こちらはすでに8月11日の山の日が記念日として制定されています。 「山

フレキシブルアームなタブレットスタンドが思いのほか便利そう

COSUPAさんのご厚意で、スマートフォン・タブレット用のフレキシブルアームスタンドをご提供いただきました。 この手の製品は以前からありますが、正直なところ「グラグラしたり自重で垂れ下がってきて使い物

AndroidになったNuAns NEO [Reloaded]発表 おさいふ対応、防水防塵で5月に発売

トリニティがWindows 10 Mobileで販売したNuAns NEO。 その後継機となるNuAns NEO [Reloaded]が発表されました。 NuAns NEO [Reloaded] 発表

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

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

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

AndroidになったNuAns NEO [Reloaded]発表 おさいふ対応、防水防塵で5月に発売

AndroidになったNuAns NEO [Reloaded]発表 おさいふ対応、防水防塵で5月に発売

トリニティがWindows 10 Mobileで販売したNuAns NEO。 その後継機となるNuAns NEO [Reloaded]が発表されました。 NuAns NEO [Reloaded]...

Amazon、音声リモコンが標準装備になった新型Fire TV Stickの予約を開始 4月6日発売

Amazon、音声リモコンが標準装備になった新型Fire TV Stickの予約を開始 4月6日発売

Amazonが新型Fire TV Stickの予約受付を開始しました。 発売は4月6日、価格は4980円です。 この新型、米国では昨年10月に発売されていますが、大きな変更点として、パーソナ...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

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

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

HUAWEI P9とP9 lite、どちらを購入するか悩んでいる人のために、スペック比較と選ぶためのポイントになりそうな箇所をピックアップしてみました。...

MENU

back to top