動画のレスポンシブ対応メモまとめ

動画埋め込みと自動再生のおさらい

動画埋め込みの種類

• videoタグ
• youtube、vimeo等のiframeタグ

###■ videoタグ

<video controls autoplay muted loop playsinline poster="hoge.jpg">
  <source src="hoge.mp4" type="video/mp4">
</video>

####自動再生
autoplay属性追加。muted必須！
iOSインライン対応用にplaysinline追加。

その他のオプション
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

今回の検証で気が付いたけど、
ブラウザの可視範囲に入った時だけ再生されるようになっている（！）

とは言え、全ブラウザではないので別途jsで制御が必要。

対応

• chrome
• safari
• Android Chrome
• iPhone Chrone

未対応

• firefox
• IE11
• Edge

■ youtube

iframeのコードをコピペ
リンクの共有 > 埋め込む > 動画の埋め込み

自動再生

パラメータでautoplayにチェック、選択したオプションを使用してプレーヤーを更新してコードをコピペ
https://developers.google.com/youtube/youtube_player_demo

■ vimeo

埋め込みコードをコピペ

埋め込み > オプションを適宜設定 > 埋め込みコード

jsで制御する場合

1.script読み込み

<script src="https://player.vimeo.com/api/player.js"></script>

2.動画読み込みの準備

js

 var player = new Vimeo.Player($('#hoge'), {
    id: ID,
    autoplay: true, // 自動再生
    autopause: false, // 2つの動画を埋め込む場合、同時再生を制御する
    muted: true, // 自動再生の際は必須
    loop: true, // 繰り返し
    background: true // controlを非表示にしてミュート、繰り返し再生する
  });

その他のオプション
https://developer.vimeo.com/player/sdk/embed

3.動画読み込み

js

 player.on('play', function(){
   // 再生後の処理
 });

レスポンシブ対応

###■videoタグ

####直接タグに指定する

// widthに%で指定する

<video controls autoplay muted loop playsinline poster="hoge.jpg" width="80%">
  <source src="hoge.mp4" type="video/mp4">
</video>

####cssで制御する場合

css

video {
  width: 80%; // 適宜指定
}

###■iframe
youtube、vimeo等iframeで埋め込みの場合はwidthに%が対応してないので
アスペクト比の計算をして適宜調節する

css

// 親要素

hoge {
  width: 80%; // 適宜指定
  height: 0;
  position: relative;
  padding-bottom: 56.25%; // アスペクト比16:9 = 9/16 * 100%
}

// 該当のiframe

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

おわり！