前提・実現したいこと
wordpressのonetoneというテーマでホームページを作成しています。
そこで、スマートフォンでも背景動画としてyoutube動画を自動再生したいを考えています。
発生している問題
https://www.non-standardworld.co.jp/12814/
上記を参考に作成(コピペですが)
テストでは自動再生するのですが、実際にwordpressにアップすると動画の画面も現れず再生されない
再生できない環境用に設定している静止画が表示されます。
該当のソースコード
html
1<div id="visual_header" class="background"> 2 <div class="background-wrap"> 3 <div class="background-movie"> 4 <div id="background-movie-player"></div> 5 </div> 6 </div> 7</div>
css
1.background { 2 background: url(***.jpg) no-repeat center center; 3 background-size: cover; 4 position: relative; 5 z-index: -2; 6 width: calc(100vh * 1.78); 7 height: 100vh; 8 margin: 0 auto; 9 10 .background-wrap { 11 position: relative; 12 top: 0; 13 left: 0; 14 z-index: -1; 15 min-width: 100%; 16 min-height: 100%; 17 overflow: hidden; 18 .background-movie { 19 position: relative; 20 display: flex; 21 justify-content: center; 22 } 23 #background-movie-player { 24 width: calc(100vh * 1.78); 25 height: 100vh; 26 flex: none; 27 } 28 } 29}
js
1// YouTube IFrame Player API の読み込み 2var tag = document.createElement('script'); 3tag.src = "https://www.youtube.com/iframe_api"; 4var firstScriptTag = document.getElementsByTagName('script')[0]; 5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 6 7// YouTubeの埋め込み 8var ytPlayer; 9function onYouTubeIframeAPIReady() { 10 ytPlayer = new YT.Player('background-movie-player', { 11 videoId: '2ZBTVjhKr5E', 12 playerVars: { 13 'autoplay': 1, 14 'controls': 0, 15 'enablejsapi': 1, 16 'iv_load_policy': 3, 17 'disablekb':1, 18 'showinfo':0, 19 'rel':0, 20 'start': 5, 21 'modestbranding': 1 22 }, 23 events: { 24 'onReady': onPlayerReady, 25 'onStateChange': onPlayerStateChange, 26 'onError': onPlayerError 27 } 28 } 29 ); 30} 31 32 33 34 35// プレーヤーの準備ができたとき 36function onPlayerReady(event) { 37 // 動画をミュートにする 38 const player = event.target; 39 player.mute(); 40 player.playVideo(); 41} 42 43// onStateChangeのコールバック関数 44function onPlayerStateChange(event) { 45 var status = event.data; 46 var playerWrap = $('#header .background-wrap'); 47 var names = { 48 '-1' : '未開始', 49 '0' : '終了', 50 '1' : '再生中', 51 '2' : '停止', 52 '3' : 'バッファリング中', 53 '5' : '頭出し済み' 54 }; 55 //バッファリングの完了後、動画背景を表示させる 56 if (status == 1) { 57 $(playerWrap).css('opacity','1'); 58 } else { 59 $(playerWrap).css('opacity','0'); 60 } 61} 62 63// errorの発生時 64function onPlayerError(event) { 65 var errorstatus = event.data; 66 var playerWrap = $('#header .background-wrap'); 67 //何らかのエラーステータスが渡された場合、youtubeプレイヤーを削除する 68 if (errorstatus !== '') { 69 $(playerWrap).remove(); 70 } 71}
個人写真の為、cssの画像部分
background: url(***.jpg)
とさせていただいています、不都合がありましたらごめんなさい。
素人考えですがwordpress、onetoneというテーマ、が
動画の自動再生を妨げているのかなと思うのですが
どなたかお詳しい方よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。