YouTubeのパラメータとレスポンシブについて

YouTubeを埋め込みコードにパラメータを追加する事で様々な効果を与える事ができます。

 

パラメータについては『YouTubeを効果的に見せるための12の隠しパラメータ』を参照ください。詳しくまとめてくれています。

ちなみに、YouTubeを自動再生で繰り返し再生するには


<iframe width="560" height="315" src="http://www.youtube.com/embed/YouTube_ID?rel=0&autoplay=1&loop=1&playlist=YouTube_ID" frameborder="0" allowfullscreen></iframe>
  • rel・・・関連動画の表示[1]、非表示[0]
  • autoplay・・・自動再生の有効[1]、無効[0]（デフォルト）
  • loop・・・繰り返し再生の有効[1]、無効[0]（デフォルト）
  • playlist・・・連続再生するYouTubeのIDを入力（複数の動画の場合はカンマ区切りでIDを入力）

※iframeで繰り返し再生をする場合は【playlist=YouTube_ID】の設定が必要です。

 

ここからが本題！！

 

YouTubeはスマホで閲覧した場合にページの横幅を出てしまいスクロールがでてしまいます。

対応方法は検索するとJavaScript【jquery.fitvids.js】による対応などがありましたが、手っ取り早くCSSで対応ができるそうです。

 


.movie {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

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

 

これだけで対応可能！！凄いです！

ページの先頭へ