2024.01.17
PCとスマホで全面背景動画を切り替える方法
はじめに
ファーストビューなどに設置する全面背景動画を、PC用は横長／スマホ用は縦長の別動画でレスポンシブに切り替えられるようにする方法をご紹介します。
使用するファイル
- プログラムファイル（HTML・CSS・jQuery）
- PC用動画（movie-pc.mp4）
- スマホ用動画（movie-sp.mp4）
- ポスター画像（poster.jpg）
※動画読み込みまでの間に表示される画像
実際のコード
HTML
<div class="video_wrap">
<video muted="" playsinline="" loop="" preload="" poster="★パス★/poster.jpg" id="video">
<source type="video/mp4" src="★パス★/movie-pc.mp4" class="mov_switch">
</video>
</div>
CSS
.video_wrap {
position: relative;
z-index: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video_wrap #video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%,-50%);
z-index: -1;
}
.video_wrap #video.sp_mov {
max-height: 100%;
}
@media screen and (max-width: 1280px) {
.video_wrap {
height: 64.25vw;
}
}
@media screen and (max-width: 768px) {
.video_wrap {
height: 100vh;
}
}
@media screen and (max-width: 413px) {
.video_wrap #video.sp_mov {
max-height: 111%;
}
}jQuery
$(function(){
/* video switch
*************************************************** */
var $elem = $('.mov_switch');
var $video = $('#video');
var sp = '-sp.';
var pc = '-pc.';
var replaceWidth = 560; //動画を切り替えるタイミングのpx値
/* --- video切り替え・class付与の関数 --- */
function movSwitch() {
var windowWidth = parseInt($(window).width());
$elem.each(function() {
var $this = $(this);
if(windowWidth >= replaceWidth) {
$this.attr('src', $this.attr('src').replace(sp, pc));
$this.closest('video').removeClass('sp_mov');
$this.closest('video').addClass('pc_mov');
} else {
$this.attr('src', $this.attr('src').replace(pc, sp));
$this.closest('video').addClass('sp_mov');
$this.closest('video').removeClass('pc_mov');
}
});
$video.get(0).load();
$video.get(0).play();
}
movSwitch();
/* --- resize時の処理（OS対応など含む） --- */
var resizeTimer;
var ua = navigator.userAgent;
var window_w1 = $(window).width();
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
var window_w2 = $(window).width();
if ( ua.indexOf("iPad") > -1 || ua.indexOf("iPhone") > -1 || (ua.indexOf("macintosh") > -1 && "ontouchend" in document) ) {
if(window_w1 != window_w2) {
movSwitch();
}
} else {
movSwitch();
}
}, 200);
});
/* video start
*************************************************** */
function video_play() {
$video.get(0).play();
}
video_play();
});まとめ
PC用比率のままの動画だとスマホ時に左右が切れてしまい何がなんだか……となってしまうため、このような対応にしました。
HTMLやCSS、class名など適宜状況に合わせてカスタムしていただければと思います。