Below You will find an example of trying to use an embedded YT video. While working perfectly outside Figma, while on Figma it is required to use both YT’s button in addition to my own, which I want not.
Please provide with a workaround or fix the issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Autoplay Issue Demo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.video-container {
margin: 20px 0;
border: 2px solid #ccc;
padding: 10px;
}
.controls {
margin: 10px 0;
}
button {
margin: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.status {
background: #f0f0f0;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>YouTube Embedded Player - Autoplay Issue Demo</h1>
<div class="status">
<strong>Issue:</strong> YouTube embedded videos require user interaction (clicking the red play button)
before they can be played programmatically via JavaScript API calls.
</div>
<div class="video-container">
<h3>YouTube Video Player</h3>
<div id="player"></div>
</div>
<div class="controls">
<button onclick="attemptAutoplay()">Try to Play Automatically</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="checkPlayerState()">Check Player State</button>
</div>
<div class="status" id="statusLog">
<strong>Status:</strong> Player loading...
</div>
<script>
let player;
// Load YouTube IFrame API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// YouTube API ready callback
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'dQw4w9WgXcQ', // Rick Astley - Never Gonna Give You Up (safe demo video)
playerVars: {
'autoplay': 0,
'controls': 1,
'rel': 0,
'modestbranding': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
function onPlayerReady(event) {
updateStatus('Player ready. Try clicking "Try to Play Automatically" - it will likely fail until you click the red play button first.');
}
function onPlayerStateChange(event) {
const states = {
'-1': 'unstarted',
'0': 'ended',
'1': 'playing',
'2': 'paused',
'3': 'buffering',
'5': 'video cued'
};
updateStatus(`Player state changed to: ${states[event.data]} (${event.data})`);
}
function onPlayerError(event) {
updateStatus(`Player error: ${event.data}`);
}
function attemptAutoplay() {
if (player && player.playVideo) {
try {
player.playVideo();
updateStatus('JavaScript playVideo() called - Check if video actually started playing...');
} catch (error) {
updateStatus(`Error attempting to play: ${error.message}`);
}
} else {
updateStatus('Player not ready yet');
}
}
function pauseVideo() {
if (player && player.pauseVideo) {
player.pauseVideo();
updateStatus('Video paused via JavaScript');
}
}
function checkPlayerState() {
if (player && player.getPlayerState) {
const state = player.getPlayerState();
const states = {
'-1': 'unstarted',
'0': 'ended',
'1': 'playing',
'2': 'paused',
'3': 'buffering',
'5': 'video cued'
};
updateStatus(`Current player state: ${states[state]} (${state})`);
}
}
function updateStatus(message) {
const timestamp = new Date().toLocaleTimeString();
document.getElementById('statusLog').innerHTML = `<strong>Status [${timestamp}]:</strong> ${message}`;
console.log(`[${timestamp}] ${message}`);
}
// Demonstrate the issue on page load
window.addEventListener('load', function() {
setTimeout(() => {
updateStatus('Page loaded. The video player is embedded above. Due to browser autoplay policies, you must manually click the red play button before JavaScript can control playback.');
}, 2000);
});
</script>
<div style="margin-top: 30px; padding: 15px; background: #e8f4f8; border-radius: 5px;">
<h3>How to reproduce the issue:</h3>
<ol>
<li>Load this page</li>
<li>Click "Try to Play Automatically" - <strong>the video will NOT start playing</strong></li>
<li>Manually click the red play button on the YouTube player</li>
<li>Now click "Try to Play Automatically" again - <strong>it will work</strong></li>
</ol>
<p><strong>Expected behavior:</strong> JavaScript should be able to play the video without requiring the manual click first.</p>
<p><strong>Actual behavior:</strong> User must click the red play button before any JavaScript playVideo() calls will work.</p>
</div>
</body>
</html>