Hello Guys,
Here what I did so far, but it didn't work.
I don't have code experience, this code I get with Chat GPT :)
My browser is Microsoft Edge.
I'm receiving some error messages like:
"Access to video at 'https://youtu.be/-QRZpligDOs' from origin 'https://preview.construct.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Embedding YouTube Video:
<!DOCTYPE html>
<html>
<head>
<!-- Include the YouTube Iframe API script -->
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<!-- Embed the YouTube video using an iframe -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y13aSEYenqQ?autoplay=1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<!-- Your other HTML content here -->
<script>
// JavaScript code for handling YouTube video playback and layout switch
var iframe = document.querySelector("iframe");
iframe.addEventListener("load", function() {
var player = new YT.Player(iframe, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
runtime.callFunction("SwitchLayoutFunction");
}
}
</script>
</body>
</html>
JavaScript Integration:
Trigger: On start of layout
Action:
Action: Run JavaScript
JavaScript code:
var iframe = document.querySelector("iframe");
iframe.addEventListener("load", function() {
var player = new YT.Player(iframe, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
runtime.callFunction("SwitchLayoutFunction");
}
}
Function:
Function Name: SwitchLayoutFunction
Parameters: None
Action:
Action: System -> Go to layout