htmlcssyoutubecss-grid

Responsive layout using CSS Grid w/ embedded YouTube video

I'm trying to create a responsive layout using CSS grid that splits the screen into two columns: left column taking up 2/3 and right column taking up 1/3 of the screen.

My objective is to embed a YouTube video into the left column that scales up/down using up all the available space -- except padding -- in the left column. When viewed on a smaller screen, the columns should stack up on top of each other.

Similarly, I place an image and some text in the right column which take up 1/3 of the screen. I'm also trying to get the image to scale up and down as needed.

I created a public repo showing my code. I got the grid working but haven't been able to get the video or image to take up all the available space and scale down as needed on a smaller screen. Here's a link to the repo: https://github.com/imsam67/css-grid-video

I'd appreciate some pointers on what I'm missing here. Thanks!

Solution

  • Your .videos-section should not be a grid — remove display: grid;.

    To make the iframe responsive, remove the width and height attributes from your HTML and add the following CSS:

    .videos-section > iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

    Make .message-section a vertical flexbox rather than a grid, make the image a direct child of the flexbox, and remove align-items: center. The default align-items value is stretch, which will cause the image to scale to fill the available width.

    .message-section {
  display: flex;
  flex-direction: column;
}


    .avatar {
  display: flex;
  background-color: #333;
  width: 40px;
  height: 40px;
  border-width: 2px;
  border-color: #333;
  border-style: solid;
  border-radius: 50%;
  overflow: hidden;
  justify-content: center;
  margin-right: 4rem;
  img-width: 100%;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  border-width: 0;
  border-radius: 0.4rem;
  background-color: #421C27;
  min-width: 10rem;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right: 1rem;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #FFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #1E201E;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.my-container {
  background-color: #31322B;
  color: #FFF;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4rem 1fr auto;
  grid-template-areas: "header" "main" "footer";
}

.my-header {
  display: grid;
  grid-area: header;
  top: 0;
  position: sticky;
  background-color: #171111;
  opacity: 0.9;
  color: #FFF;
  padding: 0;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "header-left header-right";
}

.user-info {
  grid: header-right;
  display: grid;
  justify-content: end;
}

.my-footer {
  display: flex;
  grid-area: footer;
  background-color: #1E201E;
  opacity: 0.75;
  color: #FFF;
  padding: 1.25rem;
  font-size: 0.6rem;
  justify-content: end;
}

.main-section {
  grid-area: main;
  padding: 1.25rem;
}

.grid-two-thirds {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 1.5rem;
  grid-template-areas: "col-two-thirds-left col-one-third-right";
  transition: grid-template-columns 0.3s ease;
  margin: auto;
}

@media (max-width: 768px) {
  .grid-two-thirds {
    grid-template-columns: 1fr;
    grid-template-areas: "col-two-thirds-left" "col-one-third-right";
  }
}

.videos-section {
  grid-area: col-two-thirds-left;
  width: 100%;
  justify-content: center;
}  

.videos-section > iframe {
  border: 1px solid #808080;
  width: 100%;
  aspect-ratio: 16/9;
}

.message-section {
  grid-area: col-one-third-right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
    <div id="app" class="my-container">
  <header class="my-header">
     <div class="hamburger-menu">
        &nbsp;
     </div>
     <div class="user-info">
        <div class="dropdown">
           <div class="avatar">
              <img src="https://picsum.photos/100" alt="Mr. Avatar" />
           </div>
           <div class="dropdown-content">
              <a href="#">Profile</a>
              <a href="#">Settings</a>
              <a href="#">Logout</a>
           </div>
        </div>
     </div>
  </header>
  <main class="main-section">
     <div class="grid-two-thirds">
        <div class="videos-section">

           <!-- YouTube Video IFrame -->
           <iframe src="https://www.youtube.com/embed/u31qwQUeGuM"
              frameborder="0"
              allow="autoplay; encrypted-media"
              allowfullscreen>
           </iframe>

        </div>
        <div class="message-section">
           <img src="https://picsum.photos/500" alt="Acme Logo" />
           <div>
              <h1>Lorem Ipsum!</h1>
              <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                 ultricies, nunc et posuere ultricies, nunc et posuere.
              </p>
           </div>
        </div>
     </div>
  </main>
  <footer class="my-footer">
     <span>&copy; 2025 Acme, Inc.</span>
  </footer>
</div>