I have an iframe with an embedded video from Youtube I would like to be played automatically in fullscreen mode whenever it´s clicked to play.
So far this is the code I have in my rich text module:
<div class=“tv__Video”>
<div class=“tv__VideoHeader”>
<div class=“tv__Text”>How to apply</div>
</div>
<div class=“tv__VideoContainer”>
<div class=“tv__IframeContainer”>
<div class=“hs-responsive-embed-wrapper hs-responsive-embed” style=“width: 100%; height: auto; position: relative; overflow: hidden; padding: 0; max-width: 720px; max-height: 405px; min-width: 256px; margin: 0px auto; display: block;”>
<div class=“hs-responsive-embed-inner-wrapper” style=“position: relative; overflow: hidden; max-width: 100%; padding-bottom: 56.25%; margin: 0;”>
<iframe class=“tv__Iframe hs-responsive-embed-iframe” style=“position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;” title=“YouTube video player” allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen” xml=“lang” src=“YouTube” width=“720” height=“405” data-service=“youtube”>
</iframe>
</div>
</div>
</div>
</div>
</div>
<script>
var iframe = document.querySelector(‘.tv__Iframe’);
iframe.addEventListener(‘click’, function () {
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
});
</script>
Can someone help me with the code to make it play fullscreen?
Thanks