FirefoxでYouTube埋め込みプレーヤーの画面が更新されなくなる場合の対処法
4730 ワード
内容
YouTube Player APIを有効にした状態で、音声だけ再生が続き、動画のみ止まってしまう現象の回避方法です。
この現象は、プレーヤー本体に影響する要素へtransformプロパティが設定されていて、transform-styleプロパティの値がpreserve-3dになっていると発生します。
レンダリング最適化処理による誤動作だと思われますので、要素内を一定周期で変更し回避します。
下記コードでは、一秒毎にカスタムデータ属性を変更し、擬似要素内のテキストを変更しています。（レンダリングに影響がないようにプレーヤーの後ろに配置しています）
コード
HTML
<div id="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/（動画ID）?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
#youtube {
position: relative;
width: 50%;
transform-style: preserve-3d;
}
#youtube::before {
display: block;
padding-top: 56.25%;
content: "";
}
#youtube::after {
position: absolute;
top: 0;
z-index: -1;
content: attr(data-dummytext);
}
#youtube iframe {
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
}
JavaScript
const element = document.getElementById('youtube');
setInterval(() => {
element.setAttribute('data-dummytext', new Date().getTime());
}, 1000);
HTML
<div id="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/（動画ID）?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
CSS
#youtube {
position: relative;
width: 50%;
transform-style: preserve-3d;
}
#youtube::before {
display: block;
padding-top: 56.25%;
content: "";
}
#youtube::after {
position: absolute;
top: 0;
z-index: -1;
content: attr(data-dummytext);
}
#youtube iframe {
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
}
JavaScript
const element = document.getElementById('youtube');
setInterval(() => {
element.setAttribute('data-dummytext', new Date().getTime());
}, 1000);
Author And Source
この問題について(FirefoxでYouTube埋め込みプレーヤーの画面が更新されなくなる場合の対処法), 我々は、より多くの情報をここで見つけました https://qiita.com/kuninori-ogino/items/058b6b633f0cd91e500e著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .