Sumirexxx

今日もiPhone片手に出かけます

Youtubeの埋め込み動画をレスポンシブでブラウザに応じた大きさにする方法 はてなブックマーク - Youtubeの埋め込み動画をレスポンシブでブラウザに応じた大きさにする方法

WordPress

PC movie

YouTubeの動画をブログに載せようとして、PCとスマホでサイズが変わらずに困ったことはありませんか?PCサイズのままじゃ、スマホ表示には大きすぎる!というやつです。調べてみたらすぐに解決したので、その方法をご紹介します。

と、その前に、どれくらい違いがあるか見てみてください。

設定前

全体から動画だけが大きくはみ出ています。

動画に横幅を合わせたせいで、文字まで小さくなってしまっています。これは良くない!

レスポンシブ対応前

設定後

設定後はこんなにきれいに収まってくれました。最高です!

レスポンシブ対応後

では効果を実感したところでやり方です。

埋め込みタグをdivで囲う

まずは、埋め込み動画をdivで囲みます。class名を”movie-wrap”としておきます。


<div class="movie-wrap">

<iframe width="560" height="315" src="https://www.youtube.com/embed/GHc1qCZZnAg?list=UUhFwhAIeEtpofFlbyTVvN9Q" frameborder="0" allowfullscreen></iframe>

スタイルシートに、以下を記述します。


.movie-wrap {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px;

    height: 0;

    overflow: hidden;

}

 

.movie-wrap iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

ソースはこんな感じになりました。

私の場合はサイズによって見え方を変えているので、スマホ表示の方ではなくPC表示の方に追加しました。

ソースコード

たったこれだけで、レスポンシブ対応してくれます!

こんなに簡単だけど、すごく大事ですよね。

ものすごく助かりました!

以下の記事を参考にさせていただきました

Youtubeの埋め込み動画をレスポンシブに対応させる方法 | WebClips_Design

<