Youtubeの埋め込み動画をレスポンシブ対応する!【備忘録】

2021/05/29 2021/05/29 #Html5 #youtube #CSS

Youtubeの埋め込み動画をレスポンシブ対応する!【備忘録】

こんにちは。のんです。

今回は備忘録ついでにYoutubeの埋め込み動画のレスポンシブ対応について記事にしようと思います。

私がCSSに触れるのはもしかして初めてかもしれません!

まずは結論

私はこのように対応しています。

<div class="movie_wrap">
    <iframe
        width="560"
        height="315"
        src="{$url}"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>
</div>
.movie_wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.movie_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

youtubeの埋め込み動画とは?

<iframe
    width="560"
    height="315"
    src="{$url}"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

のことですね。ご自身のブログやらに埋め込むときに利用している方は多いのではないでしょうか?

iframeの問題点こそレスポンシブ対応していないこと

しかしiframeですと、そのままではレスポンシブ対応していません。

width="560"や、height="315"とあるようにそのまま貼ると固定長で、スマホのときにはみ出したり、PCのときに小さかったりします。

それを解決するためにiframeにスタイルを当てたいのですが、単純にiframeに対してwidth: 100%を当ててもレスポンシブにはなりません。

スクリーンショット 2021-05-31 1.57.22.png

こんな感じで幅がおかしくなったりします。

つまり、iframe自体の縦横比は固定にしたままレスポンシブにしたいということになりますね

それをするためにはiframeのサイズは常に100%にする必要があるので、

iframe {
    width: 100%;
    height: 100%;
}

しかしこれでは縦に長過ぎます。

ここで、登場するのが、ラップですね。

予め、iframeを格納するレスポンシブなコンテナを用意しておいて、そいつに対して常時100%にすれば、レスポンシブ対応できるという考えです。

ですので、iframeにはposition: absolute;を追加して、

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

となります。

更にレスポンシブなコンテナはposition: absolute;iframeを格納するので、position: relative;を設定した上でレスポンシブなwidth: 100%を当てて、

.movie_wrap {
    position: relative;
    width: 100%;
}

また、高さは無くしてheight: 0;padding-bottomで表示範囲を調整します。
ちょうどいい塩梅なのが、padding-bottom: 56.25%;ですね。

.movie_wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

最後にoverflow: hidden;を追加して終了です。

.movie_wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

最後に

これはyoutubeの埋め込み以外にも使えるテクニックなのでは無いでしょうか?

すでに既出の技術かもしれませんが、備忘録ついでに書いておきました。

最近引っ越しを検討していまして、あまり技術記事が更新できずに申し訳ない...

6月中旬くらいには一段落つくので、それまでお楽しみに!

そのときはよしなに。

.

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust