横幅いっぱいmp4のレスポンシブ背景(キービジュアルなど)

お母ちゃん  2018.8.21 
Home > Web > 横幅いっぱいmp4のレスポンシブ背景(キービジュアルなど)
すき 0
うんこ 0

video タグだと Chrome で動かなかったので video.js を使いました。

video.js

CDNを利用する場合

head 

body の上

HTML

CSS

  padding-top: 56.25%;
(動画の [縦 ÷ 横 × 100] を 設定する)

JS

DEMO

(別ウィンドウでCodePenを開いて頂いた方が見やすいです)

See the Pen WgNVXq by HomeMadeGarbage (@hmg) on CodePen.

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください