Youtube (iframe) をレスポンシブ対応に

CATEGORY: HTML/CSS | TAG: Youtube, レスポンシブ

2014年2月25日

Youtube（iframe 要素）をレスポンシブに対応させる方法のメモ。

概要
レイアウト用の div 要素を追加
異なる縦横比やクロムの高さのクラスの追加
画面サイズにより表示・非表示

概要

iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。

参考にしたサイト：「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」

サンプル

Youtube から iframe の埋め込みコード（共有 → 埋め込みコード）を取得して、それを任意のクラス名を付けた div 要素（class=”youtube”）で囲む。

<div class="youtube">
    <iframe width="640" height="360" src="//www.youtube.com/embed/dH3GSrCmzC8" frameborder="0" allowfullscreen></iframe>
</div><!--end of .youtube-->

以下のように CSS を指定する。

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
}
 
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube

position: relative
子要素の基準とする

padding-bottom: 56.25%
幅の 56.25% を高さとする設定（16:9 の場合 → 9 ÷ 6 = 56.25 ）

padding-top: 25px
クロム用の高さを指定

height: 0
古い IE のレイアウト用の指定

.youtube iframe

position: absolute
親要素（.youtube）のパディング領域に配置するために、絶対配置を指定

top: 0
トップに配置

left: 0
左に配置

width: 100%
親コンテナの幅いっぱいに表示

height: 100%
親コンテナの高さいっぱいに表示

レイアウト用の div 要素を追加

レイアウト用の div 要素（class=”yt_wrapper”）を追加して、最大幅、最小幅やレイアウト等を追加

<div class="yt_wrapper">
    <div class="youtube">
        <iframe width="640" height="360" src="//www.youtube.com/embed/dH3GSrCmzC8" frameborder="0" allowfullscreen></iframe>
    </div><!--end of .youtube--> 
</div><!--end of .yt_wrapper-->

追加した CSS

.yt_wrapper {
  max-width: 640px;
  min-width: 280px;
  margin: 20px auto;
  border: 1px solid #CCC;  
}

異なる縦横比やクロムの高さのクラスの追加

異なる縦横比やクロムの高さが指定できるように以下のようなクラスを追加。

サンプル

.fourBYthree：動画を「4:3」で表示
.chrome_35 ：クロムの高さを「35px」で表示

デフォルトでは動画を「16:9」で、クロムの高さを「25px」で表示し、これらのクラスを指定することで、縦横比やクロムの高さを変更可能になる。（但し、クロムの高さは実際にには固定のようで、クロムの高さを変更するとコンテンツの高さが増えるみたい。。。）

HTML

<!--デフォルト「16:9」クロムの高さを「25px」-->
<div class="yt_wrapper">
    <div class="youtube">
        <iframe width="640" height="360" src="//www.youtube.com/embed/dH3GSrCmzC8" frameborder="0" allowfullscreen></iframe>
    </div><!--end of .youtube--> 
</div><!--end of .yt_wrapper--> 
 
<!--「4:3」クロムの高さを「35px」-->
<div class="yt_wrapper">
    <div class="youtube fourBYthree chrome_35">
        <iframe width="640" height="360" src="//www.youtube.com/embed/dH3GSrCmzC8" frameborder="0" allowfullscreen></iframe>
    </div><!--end of .youtube--> 
</div><!--end of .yt_wrapper-->

追加したCSS

.fourBYthree {
  padding-bottom: 75%;  //3 ÷ 4 = 75
}
 
.chrome_35 {
  padding-top: 35px;
}

画面サイズにより表示・非表示

複数の Youtube 動画を表示する場合、数が多いとスマートフォンなどではロードするのに時間がかかりすぎてしまうので、画面サイズが小さい場合は Youtube へのリンクのみを表示する例。（この方法が実用的かどうかは別）

サンプル

HTML では、画面が小さい場合のリンクを記述しておき、jQuery で画面サイズが大きければ要素を書き換える。

HTML

<div class="yt_wrapper">
      <h3><a href="https://www.youtube.com/watch?v=dH3GSrCmzC8" target="_blank">Bill Evans - Waltz For Debby </a></h3> 
</div><!--end of .yt_wrapper-->  
 
<div class="yt_wrapper">
      <h3><a href="https://www.youtube.com/watch?v=qfGHxzKeHvM" target="_blank">Bill Evans Trio - My Foolish Heart </a></h3> 
</div><!--end of .yt_wrapper-->  
     
<div class="yt_wrapper">      
      <h3><a href="https://www.youtube.com/watch?v=csGnvbJCQKU" target="_blank">Bill Evans Trio - Nardis</a></h3> 
</div><!--end of .yt_wrapper-->

jQuery では画面幅が 600px 以上の場合に以下を行う。

div 要素（class=”yt_wrapper”）に対して「each()」で a 要素の href 属性から iframe で使用する src 属性に使う値を取得して src 属性を作成
iframe を作成して src 属性を指定し div 要素（class=”youtube”）で囲んで追加（append）する
リンク（a 要素）を削除

jQuery

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script>
jQuery(function($){  
  function replace_yt() {
    $('.yt_wrapper').each(function(index, element) {
      var this$ = $(this);
      var yt_src = this$.find('a').attr('href').replace(/http(s)?:\/\/www.youtube.com\/watch\?v=/, "");
      yt_src = "http://www.youtube.com/embed/" + yt_src;
      var html = '<div class="youtube"><iframe src="' + yt_src + '" frameborder="0" allowfullscreen></iframe></div>';
      this$.append(html);
      var h3_html = this$.find('h3').html();
      h3_html = h3_html.replace(/<a href=&#91;^>]+>/, "");
      h3_html = h3_html.replace(/<\/a>/, "");
      this$.find('h3').html(h3_html);
        });
  }
  
  if($(window).width() > 600) {
    if($('.yt_wrapper').length > 0){
      replace_yt();
    }  
  }
  
  var timer = false; 
  $(window).resize(function(){  
    var w = $(window).width();      
    if (timer !== false) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(w > 600) {
        if($('.yt_wrapper').length > 0 && $('.youtube iframe').length === 0){
          replace_yt();
        }  
      }
 
    }, 200);
  });   
});
</script>

メディアクエリを追加。

Webkit （SafariやChrome）のメディアクエリー実装にはスクロールバーの幅（15px～20px）を含めないというバグがある。

Webkit 以外ではスクロールバーの幅（15px～20px）を含めるので、600px ではなく 620px とした。（これが良いかどうかは難しい）

また、大きいサイズから小さいサイズにリサイズした場合、Youtube の表示はなくならないので、.youtube や .youtube iframe の記述はデフォルトの CSS に記述しておいた。

CSS

.yt_wrapper h3 {
  color: #999;
  font-size: 14px;
  padding-top: 10px;
  padding-left: 20px;
}
 
.yt_wrapper h3 a {
  text-decoration: none;
  color: #EF9128;
}
 
.yt_wrapper h3 a:hover {
  text-decoration: underline;
  color: #AB570D;
}
.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    margin: 3%;
  }
  
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
@media only screen and (min-width:  620px) { 
  .yt_wrapper h3 {
    color: #777;
    font-size: 14px;
    text-align: center;
  }
  .yt_wrapper {
    max-width: 700px;
    min-width: 280px;
    margin: 20px auto;
    border: 1px solid #CCC;  
  }
}

Web Design Leaves