'Positioning of the youtube video

So I wanted to place this youtube video like in this picture in the red rectangle but none of my ideas work, every time the video is in the weird place. Could someone help? (Adjust the size of the video window) [ adding random words because post need some more description because it's mostly code, hey how is your day going]

body {
    margin: 0;
    height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.3fr;
    grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
    grid-template-areas:
    "header main main"
    "lmain main main"
    "lmain below below"
    "footer footer footer";
    height: 100vh;
}


main {
    grid-area: main;
    background: #FFFADF;
}   

section.below {
    grid-area: below;
    background: #C4B35A;
}


section.footer {
    grid-area: footer;
    background: #615e5e;
}

header {
    grid-area: header;
    background: rgb(198, 250, 239);
}
.lmain {
    grid-area: lmain;
    background: rgb(233, 112, 112);
    background-size: cover;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #486cad;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #95b8d1;
}

#main-text{
    font-family:sans-serif;
    font-weight: 550;
    font-size: 17px;
    text-align: center;
}

#quote{
    font-family:sans-serif;
    font-size: 18px;
    text-align: center;
}
#author{
    font-family:sans-serif;
    margin-right: 10px;
    font-size: 10px;
    text-align: center;
}
.text-box hr{
    width: 20%;
    height: 1px;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
    border: none;
}
.box{
    margin-left: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(59, 58, 58, 0.46);
    border-radius: 5px;
    box-shadow: -2px 2px 7px gray;
}
main h1{
    font-family: sans-serif;
    padding-left: 40px;
    padding-top: 40px;
    font-weight: 700;
}
main h6{
    font-family: sans-serif;
    padding-left: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the title idk</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <header>
            
        </header>   
        <main>
            <div id="description">
                <h1>Man's<br>
                    best<br>
                    friend
                </h1>
                <h6>Pies towarzyszy człowiekowi od tysięcy lat i trudno dziś wyobrazić sobie,<br> 
                    by mogło być inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br> 
                    człowieka” nie jest tylko pustym sloganem – psy to naprawdę niezrównani <br> 
                    przyjaciele, którzy nigdy nie zawodzą i zostają przy Tobie na zawsze. <br> 
                    Jeśli masz psa, nie musimy Ci tego zresztą tłumaczyć – to się po prostu <br> 
                    czuje. Jeśli zaś dopiero zastanawiasz się nad przygarnięciem pod swój <br> 
                    dach czworonożnego kumpla, nie wahaj się. Na filmie przedstawiliśmy <br> 
                    kilka powodów, dlaczego pies jest najlepszym przyjacielem człowieka! 
                </h6>
                </div>
            <div class="commercial">
            <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
            </div>
        </main>
        <section class="below">
            
        </section>
        
        <section class="footer">
            footer
        </section>
        <div class="lmain">
            
        </div>
       
        

    </div>

</body>
</html>

html css

Solution 1:^[1]

I wraped your content (h1,content, commercial) in a container which i assign with flex box.

body {
    margin: 0;
    height: 100vh;
}



.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.3fr;
    grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
    grid-template-areas:
    "header main main"
    "lmain main main"
    "lmain below below"
    "footer footer footer";
    height: 100vh;
}


main {
    grid-area: main;
    background: #FFFADF;
  
}   
.flexi {
  display:flex;
}
.commercial {
  margin-top:40px;
  padding-left:40px;
}

section.below {
    grid-area: below;
    background: #C4B35A;
}


section.footer {
    grid-area: footer;
    background: #615e5e;
}

xheader {
    grid-area: header;
    background: rgb(198, 250, 239);
}
.lmain {
    grid-area: lmain;
    background: rgb(233, 112, 112);
    background-size: cover;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #486cad;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #95b8d1;
}

#main-text{
    font-family:sans-serif;
    font-weight: 550;
    font-size: 17px;
    text-align: center;
}

#quote{
    font-family:sans-serif;
    font-size: 18px;
    text-align: center;
}
#author{
    font-family:sans-serif;
    margin-right: 10px;
    font-size: 10px;
    text-align: center;
}
.text-box hr{
    width: 20%;
    height: 1px;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
    border: none;
}
.box{
    margin-left: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(59, 58, 58, 0.46);
    border-radius: 5px;
    box-shadow: -2px 2px 7px gray;
}
main h1{
    font-family: sans-serif;
    padding-left: 40px;
    padding-top: 40px;
    font-weight: 700;
}
main h6{
    font-family: sans-serif;
    padding-left: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

<div id="container">
  <header>

  </header>   
  <main>
    
  </main>
</div>
    <div class="grid-container">
        <header>
            
        </header>   
        <main>
          <div class="flexi">
            <div id="description">
                <h1>Man's<br>
                    best<br>
                    friend
                </h1>
                <h6>Pies towarzyszy cz?owiekowi od tysi?cy lat i trudno dzi? wyobrazi? sobie,<br> 
                    by mog?o by? inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br> 
                    cz?owieka” nie jest tylko pustym sloganem – psy to naprawd? niezrównani <br> 
                    przyjaciele, którzy nigdy nie zawodz? i zostaj? przy Tobie na zawsze. <br> 
                    Je?li masz psa, nie musimy Ci tego zreszt? t?umaczy? – to si? po prostu <br> 
                    czuje. Je?li za? dopiero zastanawiasz si? nad przygarni?ciem pod swój <br> 
                    dach czworono?nego kumpla, nie wahaj si?. Na filmie przedstawili?my <br> 
                    kilka powodów, dlaczego pies jest najlepszym przyjacielem cz?owieka! 
                </h6>
                </div>
            <div class="commercial">
             <iframe width="411px" height="261px" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
            </div>
          </div>
        </main>
        <section class="below">
            
        </section>
        
        <section class="footer">
            footer
        </section>
        <div class="lmain">
            
        </div>
       
        

    </div>

Solution 2:^[2]

Add a float and a width to your description and commercial div.

Example that works in your code:

body {
    margin: 0;
    height: 100vh;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.3fr;
    grid-template-rows: 0.4fr 4fr 3fr 0.6fr;
    grid-template-areas:
    "header main main"
    "lmain main main"
    "lmain below below"
    "footer footer footer";
    height: 100vh;
}


main {
    grid-area: main;
    background: #FFFADF;
}   

section.below {
    grid-area: below;
    background: #C4B35A;
}


section.footer {
    grid-area: footer;
    background: #615e5e;
}

header {
    grid-area: header;
    background: rgb(198, 250, 239);
}
.lmain {
    grid-area: lmain;
    background: rgb(233, 112, 112);
    background-size: cover;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #486cad;
}
li{
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #95b8d1;
}

#main-text{
    font-family:sans-serif;
    font-weight: 550;
    font-size: 17px;
    text-align: center;
}

#quote{
    font-family:sans-serif;
    font-size: 18px;
    text-align: center;
}
#author{
    font-family:sans-serif;
    margin-right: 10px;
    font-size: 10px;
    text-align: center;
}
.text-box hr{
    width: 20%;
    height: 1px;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
    border: none;
}
.box{
    margin-left: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(59, 58, 58, 0.46);
    border-radius: 5px;
    box-shadow: -2px 2px 7px gray;
}
main h1{
    font-family: sans-serif;
    padding-left: 40px;
    padding-top: 40px;
    font-weight: 700;
}
main h6{
    font-family: sans-serif;
    padding-left: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

#description {
  float: left;
  width: 50%;
}

.commercial {
  float: right;
  width: 50%;
}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the title idk</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <header>
            
        </header>   
        <main>
            <div id="description">
                <h1>Man's<br>
                    best<br>
                    friend
                </h1>
                <h6>Pies towarzyszy cz?owiekowi od tysi?cy lat i trudno dzi? wyobrazi? sobie,<br> 
                    by mog?o by? inaczej. Popularne stwierdzenie „pies najlepszym przyjacielem <br> 
                    cz?owieka” nie jest tylko pustym sloganem – psy to naprawd? niezrównani <br> 
                    przyjaciele, którzy nigdy nie zawodz? i zostaj? przy Tobie na zawsze. <br> 
                    Je?li masz psa, nie musimy Ci tego zreszt? t?umaczy? – to si? po prostu <br> 
                    czuje. Je?li za? dopiero zastanawiasz si? nad przygarni?ciem pod swój <br> 
                    dach czworono?nego kumpla, nie wahaj si?. Na filmie przedstawili?my <br> 
                    kilka powodów, dlaczego pies jest najlepszym przyjacielem cz?owieka! 
                </h6>
                </div>
            <div class="commercial">
            <br><br><br>
            <iframe width="411" height="161" src="https://www.youtube.com/embed/3LzNQY3aT4c" title="YouTube video player"
             frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
            </div>
        </main>
        <section class="below">
            
        </section>
        
        <section class="footer">
            footer
        </section>
        <div class="lmain">
            
        </div>
       
        

    </div>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Maik Lowrey
Solution 2	Dennis

'Positioning of the youtube video

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]