html - 嵌入视频位置

标签 html css embed

我向我的网站添加了嵌入视频，但它的位置非常糟糕，我该如何修复它？

这就是现在的样子:enter image description here

这就是我想要的样子(红色框是嵌入视频):enter image description here 

.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>
正如您在图片中看到的，嵌入视频位于主要内容后面并且位置错误。

这可能是因为我的主要内容最大宽度是 768 px。

最佳答案 

<!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>

你可以尝试这样的事情。要将 div's 拆分为 Flex 属性，例如在下面的代码中，我将 2 个 div's 与 flex:1 和中间的 拆分div 有 flex:2 可以均匀地分布它们，这样你就可以用它们做你想做的事。我不知道我解释得是否很好，因为我的英语不太好，但我想你明白了:)

.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>

此外，您上面发布的图片，您可以使用grid-template-areas来实现，将grid-area:foo放在CSS中的CSS类上，并传播它。您可以检查 here

关于html - 嵌入视频位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72501337/

上一篇：javascript - 取消选中框 Javascript 后重置输入值？

下一篇：go - 如何让 docker-compose 容器看到 Redis 主机？

相关文章：

iOS 如何使用 segue 获取对嵌入 Storyboard容器中的 View Controller 的引用？

css - 跨度定位 IE 和一些 CSS 的未知问题

javascript - Bootstrap 灯箱不工作

html - HTML5音频元素样式怪异

html - 如何使用 vuetify 在工具栏中添加自定义 Logo /图像

object - Windows Media Player 对象 z 索引

jquery - CSS - 简单的 DIV 布局问题

html - 有可能使 :before pseudo element clickable for a phone number on iOS?

javascript - 如何在另一个上使用 : text on one column, 图像，仅使用引导 div？

javascript - 如何让 Yammer 嵌入源事件监听器正常工作？

©2024 IT工具网  联系我们