/ Grid Container /
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); / Automatically adjusts columns based on screen size /
    gap: 20px;
    padding: 20px;
}

/ Content Styling /
.content {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/ Video Styling /
.video iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9; / Maintains a 16:9 aspect ratio for the video /
    border-radius: 8px;
}

/ Make sure the video container has a defined height /
.video {
    background-color: #000;
    border-radius: 8px;
}

<div class="grid-container">
        <div class="content">
            <h1>Responsive YouTube Video with CSS Grid</h1>
            <p>This is an example of embedding a YouTube video inside a CSS Grid layout.</p>
        </div>
        
        <div class="video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>

Responsive layout using CSS Grid w/ embedded YouTube video