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

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

video.js

Video.js: The Player Framework

CDNを利用する場合

head

<link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet">

1	<link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet">

body の上

<script src="https://vjs.zencdn.net/7.1.0/video.js"></script>

1	<script src="https://vjs.zencdn.net/7.1.0/video.js"></script>

HTML

<div class="video-wrapper">
  <video class="video-js" preload="auto" muted playsinline></video>
  <div class="video-inner">
    <h1>mp4を横幅いっぱいの背景にする</h1>
  </div>
</div>

<h1>mp4を横幅いっぱいの背景にする</h1>

</div>

CSS

/* ビデオ */
.video-wrapper {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
  background: none;
}
#vjs_video_3 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: none;
}

/* タイトル */
.video-inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  padding: 1rem;
}

/* ビデオ */

.video-wrapper {

width: 100%;

position: relative;

padding-top: 56.25%;

background: none;

}

#vjs_video_3 {

display: block;

position: absolute;

top: 0;

left: 0;

z-index: 1;

width: 100%;

height: 100%;

background: none;

}

/* タイトル */

.video-inner {

position: absolute;

top: 0;

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

z-index: 1;

padding: 1rem;

}

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

JS

var player = videojs(document.querySelector('video'), {
  autoplay: true,
	preload: true,
  loop: true
});
player.ready(function () {
  player.src({
	src: 'https://homemadegarbage.com/demo/assets/mov.mp4'
	});
});

var player = videojs(document.querySelector('video'), {

autoplay: true,

preload: true,

loop: true

});

player.ready(function () {

player.src({

src: 'https://homemadegarbage.com/demo/assets/mov.mp4'

});

DEMO

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

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

コメントはこちらからコメントをキャンセル

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

video.js

CDNを利用する場合

HTML

CSS

JS

DEMO

関連記事

コメントはこちらから コメントをキャンセル

コメントはこちらからコメントをキャンセル