I'm having an issue with embedding a YouTube video on my website where it is clipping through the content.
Image : https://i.sstatic.net/mT5b8.png
.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%;
float: left;
}
.right{
width:15%;
}
.center {
width:65%;
background-color: antiquewhite;
display: flex;
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;
}<div class = "topContent">
<h1>Game History</h1>
</div>
<div class = "mainContent">
<div class="left">
<iframe width="560" 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>The embedded video is overlapping with the text content on the website. I'd like to position it on the left side without affecting the other elements.
My goal is to have the embed file centered on the left side of the screen.