Embed video position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .topnav {
  overflow: hidden;
  display: flex;
  justify-content: center;
  
}

.container {
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
    flex-direction: column; 
}
.topnav a {
  float: left;
  color: red;
  text-align: center;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 23px;
  border-style: solid;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
  margin-top: 215px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.menu{
    cursor: pointer;
}
.aboutp{
    width: 1000px;
    text-align: center;
    display: block;
    margin:auto;
}
.mario{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20vw;
    margin: auto;
}
.topContent{
    background-color: red;
    height: 10vh;
    width: 70vw;
    max-width: 700px;
    max-height: 200px;
    margin: auto;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 1.5vh;
    border-style: solid;
}
.mainContent{
    height: 100%;
    width: 100%;
    margin: 0 auto 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5vh;
    max-width: 768px;

}

.left {
    width:15%;
    
    display: flex;
    flex: 2;
}

.right{
    width:15%;
    display: flex;
    flex: 1;
}

.center {
    width:65%;
    background-color: antiquewhite;
    display: flex;
    flex: 2;
    margin-bottom: 50px;
    align-items: center;
    flex-direction: column;
    border-style: solid;
}

.bottom {
    background-color: red;
    width: 100%;
    max-width: 768px;
    max-height: 200px;
    display: flex;
    border-style: solid;
}

.bottom a {
    display: flex;
    justify-content: center;
    color: white;
    padding: 2vh;
    width: 768px;
    text-decoration: none;
    font-size: 2vh;
    border-right: 2px solid black;
    text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;

}
</style>
<body>
    <div class = "topContent">
        <h1>Game History</h1>
    </div>
<div class = "mainContent">
        <div class="left">
        <iframe style="width:fit-content" height="315" src="https://www.youtube.com/embed/JO86YAiYFjc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="center">
            <p class="aboutp1">
                 bunch of text
            </p>
            <p class="aboutp2"> 
                      bunch of text
                <img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif">
                      bunch of text
            </p>

            <p class="aboutp3">
                  bunch of text
                         </p>
            <p class="aboutp4">      
                            bunch of text
                            </p>
            <p class="aboutp5">
                  bunch of text
                                 </p>
                
        </div>
        <div class="right"><img src="../resources/mario.png" alt="Mario Image" class="mario"></div>

    
    <div class="bottom">
        </div>
    
</div>
</body>
</html>

.flex{
  display:flex;
}
.flex-1{
  flex:1;
  background:red;
  width:200px;
  height:100px;
}
.flex-2{
  flex:2;
  background:green
}

<div class="flex">
    <div class="flex-1"></div>
    <div class="flex-2"></div>
    <div class="flex-1"></div>
 </div>