@mina.rotari Thank you very much for your helpful advice!
It seems that the issue was caused by a mismatch between the timing of the screen display and the video loading.
While we were trying different approaches within our team, we were able to resolve the issue using a different method from the one you suggested. Specifically, we added a script in the Appearance > Page HTML Header section that starts checking after the page has loaded.
<script>
console.log("Starting video detection");
// ポーリングを使ってvideo要素を検出する関数
function checkForVideo() {
console.log("Checking for video element...");
const video = document.querySelector('video');
if (video) {
console.log("Video found!", video);
try {
console.log("Attempting to play video");
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise.then(() => {
console.log("Playback started successfully");
}).catch(error => {
console.log("Playback failed:", error);
// 失敗した場合はユーザー操作後に再試行する
document.addEventListener('click', function() {
video.play();
console.log("Playback attempted after user interaction");
}, { once: true });
});
}
return true; // video要素が見つかり処理された
} catch (e) {
console.error("Error setting up video:", e);
}
} else {
console.log("No video element found yet");
return false; // video要素が見つからない
}
}
// 繰り返しチェックを行う
let checkCount = 0;
const maxChecks = 20; // 最大チェック回数
function startVideoCheck() {
const intervalId = setInterval(() => {
checkCount++;
console.log(`Check attempt ${checkCount}/${maxChecks}`);
if (checkForVideo() || checkCount >= maxChecks) {
clearInterval(intervalId);
console.log("Video check complete");
}
}, 100);
}
// ページロード後にチェック開始
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startVideoCheck);
} else {
startVideoCheck();
}
</script>
Thanks again for your support! 