とりあえず、既存theme仕様のコード残し。
Youtube動画を背景にする方法
Youtubeの動画設置手段として「<body></body>」の間に投入。
javascriptにてコードを入れます。
<head>
script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-5122950782577947",
enable_page_level_ads: true
});
</script>
<!--jqueryを読み込んでの表示（Youtube背景）<script></script>まで-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// YouTube Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// プレイヤーを埋め込む場所(IDを指定)
var ytArea = 'video-background';
// 埋め込むYouTube動画のID（ここにyoutubeのアドレスの後のコードをコピペ）
var ytID = '〇〇〇〇'; // https://youtu.be/〇〇〇の〇〇〇
// プレイヤーの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(ytArea, {
videoId: ytID,
playerVars: {
rel: 0, // 関連動画の非表示
controls: 0, // プレイヤーコントロールの非表示
showinfo: 0, // タイトルなどの非表示
modestbranding: 1, // YouTubeロゴの非表示
iv_load_policy: 3, // アノテーションの非表示
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 動画の準備完了後の動作
function onPlayerReady(e) {
ytPlayer.playVideo();
ytPlayer.mute();
ytPlayer.setPlaybackQuality('default'); // 画質(small・medium・large・hd720・hd1080・highres・default)
}
// 動画再生中と再生後の動作
function onPlayerStateChange(e) {
var ytStatus = e.target.getPlayerState();
if (ytStatus == YT.PlayerState.PLAYING) { //再生中
}
if (ytStatus == YT.PlayerState.ENDED) { //再生後
ytPlayer.playVideo();
ytPlayer.mute();
}
}
// 上下左右に出てくる黒帯を非表示
var WIN = $(window);
var WIN_H
var win_W
function yt_screen_retio(){
WIN_H = WIN.height();
WIN_W = WIN.width();
var screen_switch = 0.5625;
var screen_ratio = WIN_H / WIN_W;
var ratio_H = WIN_H / screen_switch;
var ratio_W = WIN_W * screen_switch;
if(screen_ratio > screen_switch){
$('#video-background').css({
'height':'100%',
'width':ratio_H,
'margin-top':'0',
'margin-left': -ratio_H /2,
'left':'50%',
'top':'0'
});
} else {
$('#video-background').css({
'width':'100%',
'height':ratio_W,
'margin-top': -ratio_W / 2,
'margin-left':'0',
'top':'50%',
'left':'0'
});
}
}
WIN.resize(function () {
yt_screen_retio();
});
$(function(){
yt_screen_retio();
});
</script>
</head>
var ytID = '〇〇〇〇'; // https://youtu.be/〇〇〇の〇〇〇の所だけ書き換えてください。
ここで書き出し（上のコードの下辺りで）
<div id="video-background"></div>
<div id="video-overlay"></div>CSSの方へ下記のように記載して下さい。
/* 背景をYOUTUBE */
#video-background,
#video-overlay {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
#video-background {
z-index: -2;
}
#video-overlay {
z-index: -1;
}「z-index」で設置の階層を調整して下さい。
これで表示されます。
続いて「mp4動画」を背景にする場合。
まずは上記と同じように「<body></body>」の間に記載しましょう。
<div class="video-container">
<video class="video" src="//〇〇〇.com/〇〇〇/〇〇〇.mp4" playsinline muted autoplay loop></video>
</div>と記載して下さい。
〇〇〇に動画ファイルのアドレスを記載して下さい。
つづいてスタイルシートは下記のように記載して下さい。
CSS↓
/* 背景をｍｐ４ */
.video-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1000;
}
.video {
position: absolute;
z-index: -1;
}
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
video {
width: 100%;
top: 50%;
transform: translateY(-50%);
}
}
@media (max-aspect-ratio: 16/9) {
video {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}
}mp4動画に関しては、コーデックの都合などで、読み込めない場合がありますので、動画編集ソフトで調整して下さい。
まあ、デフォルトでダブルクリックで再生するmp4のファイルなら問題ないと思います。
まあ、言うまでもありませんが、動画を埋め込むとページが重くなり、ページ評価が落ちやすくなります。
加えて、背景をYoutubeにするとスマホの場合は、パケットの都合上、タイトル画面で止まったままになります。
mp4の方は無限ループしますが・・・・。
mp4のファイルにしても、極力容量を減らしてアップして下さい。
まあ、重くなってでも動画を背景にしたい心意気でしたい方はお試しください。
ここのサイトは、元から重いサイトやから余計重くなる・・・・。
ブロックを多く設置し過ぎとるからね。
コンテンツが多いのですよ・・・・。
上記のコードに関して個人のサイトによって、調整して下さい。
コロナウイスるに負けるな！！！！！！！！
