Embedding YouTube videos on your website is a common task, but achieving a polished, modern experience-such as centering the video, making it fill the screen with proper aspect ratio and cropping, and ensuring it loops seamlessly-can be trickier than it seems. Here’s a practical guide to overcoming these three common issues.

Centering a YouTube Video in HTML and CSS

Centering a YouTube video (or any iframe) both horizontally and vertically is best accomplished using modern CSS techniques. The most effective methods include:

  • Flexbox: Wrapping the <iframe> in a container <div> and applying display: flex; justify-content: center; align-items: center; ensures the video is centered in both directions. This approach is robust and responsive9612.
  • Text-align: For horizontal centering only, you can use text-align: center; on the parent container.
  • Margin auto: Setting margin: 0 auto; on the iframe (with a fixed width) can also center it horizontally.

Example:

xml
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" style="aspect-ratio: 16/9; width: 80vw; max-width: 1200px; border: 0;" allowfullscreen></iframe>
</div>

Full-Screen YouTube Video with Aspect Ratio and Cropping

Making a YouTube video fill the entire screen while maintaining its aspect ratio-and cropping the sides if necessary-is a common design request. The key is to:

  • Set the container to cover the viewport: \ Use position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; for the parent div.
  • Maintain aspect ratio: \ Use the CSS aspect-ratio property on the iframe (e.g., aspect-ratio: 16/9;). Set the height to 100vh and width to calc(100vh * 16 / 9). If the viewport is too narrow, set min-width: 100vw to ensure the video always covers the screen, cropping as needed237.
  • Center the video: \ Use position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); on the iframe to keep it centered as it scales.

Example:

<div style="position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; background: black;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    style="height: 100vh; width: calc(100vh * 16 / 9); min-width: 100vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0;"
    allowfullscreen
  ></iframe>
</div>
This approach ensures the video always fills the height, remains centered, and crops the sides if the screen is too narrow<code>[23](https://www.reddit.com/r/css/comments/13klsaa/horizontally_andor_vertically_centered_iframe/)</code>.

YouTube Loop Parameter Not Working

Many developers are surprised to find that simply adding loop=1 to a YouTube embed URL does not make the video loop. The YouTube embed API requires an additional parameter:

  • You must also add playlist=VIDEO_ID to the URL. Without this, the video will play once and stop, even with loop=1.

Correct Example:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?loop=1&playlist=VIDEO_ID"
  allowfullscreen
></iframe>

Replace VIDEO_ID with your actual YouTube video ID. This ensures the video loops as expected.

Using Javascript (optional) If above doesn't work

To create a seamless, professional YouTube video embed that is centered, fills the screen with the correct aspect ratio (cropping as needed), and loops continuously:

Adjust the scale to fit your needs:


<div id="video-container" class="absolute top-0 w-full flex justify-center left-0 h-screen" style="aspect-ratio: 16 / 9;">
        <iframe class="h-full w-full absolute top-0" style="transform:scale(1.2);aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&autoplay=1&mute=1&loop=1&playlist=VIDEO_ID" title="Gargash Corporate Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<style>
       #video-container:after {
           content: '';
           display: block;
           height: 100%;
           width: 100%;
           position: absolute;
           top: 0;
           left: 0;
           background: rgba(0, 0, 0, 0.5);
       }
       </style>
       <script>
       function resizeYoutubeIframe() {
           const container = document.getElementById('video-container');
           const iframe = container.querySelector('iframe');
           const containerHeight = window.innerHeight;
           const containerWidth = window.innerWidth;

           // Calculate width to maintain 16:9 aspect ratio based on height
           let videoWidth = containerHeight * (16 / 9);
           let videoHeight = containerHeight;

           // If calculated width is less than viewport width, fill width instead and crop top/bottom
           if (videoWidth < containerWidth) {
               videoWidth = containerWidth;
               videoHeight = containerWidth * (9 / 16);
           }

           // Set iframe size
           iframe.style.width = (videoWidth + 100) + 'px';
           iframe.style.height = (videoHeight + 100) + 'px';

           // Center the iframe
           iframe.style.left = (((containerWidth - videoWidth) / 2) - 50) + 'px';
           iframe.style.top = (((containerHeight - videoHeight) / 2) - 50) + 'px';
       }

       window.addEventListener('resize', resizeYoutubeIframe);
       window.addEventListener('DOMContentLoaded', resizeYoutubeIframe);
</script>