@psychdoctrainee
Mabey this code will work
<!-- Mute and make full screen the first video -->
<div class="video-container">
<iframe src="https://www.youtube.com/embed/N6-2fVsFV8E?autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
<!-- Resize and mute the second video -->
<div class="video-container">
<iframe src="https://www.youtube.com/embed/ndp510VcqVg?mute=1" frameborder="0" allowfullscreen></iframe>
</div>
<style>
/* Style for the video container to make it full screen */
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* Aspect ratio 16:9 */
}
/* Style for the iframe to make it fill the container */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
In the first video, I've added ?autoplay=1&mute=1 to the YouTube URL to autoplay and mute the video. For both videos, I've placed them within <div class="video-container"> elements and applied CSS to make them responsive and fill the screen.
Hi @psychdoctrainee ,
To make your YouTube videos full-screen on any device and mute the first one, you can modify the HTML as follows:
<div class="video-container">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/N6-2fVsFV8E?autoplay=1&mute=1&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-container">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ndp510VcqVg?autoplay=1&mute=1&controls=0" frameborder="0" allowfullscreen></iframe>
</div>
Thank you!
