英文:
Positioning video in the middle of the background image
问题
在左侧的div中，有一个标题和按钮，另一个div中有一个视频。现在我为视频添加了背景图像，我尝试通过CSS在包装类中添加，但背景图像的尺寸给我带来了麻烦。我想把视频添加到背景图像的中间。你能帮我吗？
.container {
width: 100%;
margin-top: 20px;
}
.paragrah-desktop {
display: flex;
}
.wrapper {
border: 2px solid black;
background: url(/static/imgs/bg_video.png);
//Dimension is 1920*1080
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
}
video {
position: absolute;
width: 80%;
border: 2px solid #7cd959;
}
<section class="container" id="header">
<div class="paragrah-desktop">
<div class="subheader">
<h1 class="desktop-title">UPGRADE ALERTS</h1>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join</button>
<p class="header-p">Coming to you July 2023</p>
</div>
<div class="wrapper">
<!-- <video controls>
<source src="{% static 'imgs/mobile_video.webm' %}" type="video/webm">
</video> -->
</div>
</div>
</section>
英文:
I have a section with 2 div. In left div there is one heading and button & in another div there in one video. Now I have a background image for the video, which I tried to add through CSS in the wrapper class, but the dimensions of the background image are giving me trouble. I want to add the video in the middle of the background image. Could you help me this please?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
width: 100%;
margin-top: 20px;
}
.paragrah-desktop {
display: flex;
}
.wrapper {
border: 2px solid black;
background: url(/static/imgs/bg_video.png);
//Dimension is 1920*1080
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
}
video {
position: absolute;
width: 80%;
border: 2px solid #7cd959;
}
<!-- language: lang-html -->
<section class="container" id="header">
<div class="paragrah-desktop">
<div class="subheader">
<h1 class="desktop-title">UPGRADE ALERTS</b></h1>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join
</button>
<p class="header-p">Coming to you July 2023</p>
</div>
<div class="wrapper">
<!-- <video controls>
<source src="{% static 'imgs/mobile_video.webm' %}" type="video/webm">
</video> -->
</div>
</div>
</section>
<!-- end snippet -->
答案1
得分: 1
你不必为你的视频使用绝对定位，相反，你可以将显示设置为块级元素，然后使用边距来居中你的视频，就像这样：
video {
width: 80%;
border: 2px solid #7cd959;
display:block;
margin:0 auto;
}
如果你必须使用绝对定位，那么你需要这样做：
首先，你需要为父元素.wrapper设置position:relative，然后为视频设置left: 10%;，如下所示：
.wrapper {
border: 2px solid black;
background: url(/static/imgs/bg_video.png);
//尺寸为1920*1080
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
position:relative;
}
video {
position: absolute;
left: 10%;
width: 80%;
border: 2px solid #7cd959;
}
另外，我曾经创建过一个有趣的应用程序来理解CSS定位，希望你喜欢：
英文:
You don't have to use position absolute for your video, instead, you could set the display to block and then use margin to center your video like this:
video {
width: 80%;
border: 2px solid #7cd959;
display:block;
margin:0 auto;
}
Also if you have to use absolute for the position, here's how you have to do it:
First you need to give the position:relative to the parents which is the .wrapper and
left: 10%; to the video:
.wrapper {
border: 2px solid black;
background: url(/static/imgs/bg_video.png);
//Dimension is 1920*1080
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
position:relative;
}
video {
position: absolute;
left: 10%;
width: 80%;
border: 2px solid #7cd959;
}
Also once I created this funny app to understand the CSS positioning, I hope you like it:
答案2
得分: 1
以下是使用flex的变体：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
.paragrah-desktop {
margin: 20px;
display: flex;
text-align: center;
}
.wrapper {
border: 2px solid black;
background: url("/images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
color: #fff;
}
video {
width: 80%;
margin: 25px;
border: 2px solid #fff;
}
<!-- 语言: lang-html -->
<!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>
<link rel="stylesheet" href="/styles/main.css">
</head>
<body>
<section class="container" id="header">
<div class="paragrah-desktop">
<div class="subheader">
<h1 class="desktop-title">UPGRADE ALERTS</b></h1>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join
</button>
<p class="header-p">Coming to you July 2023</p>
</div>
<div class="wrapper">
<video controls>
<source src="{% static 'imgs/mobile_video.webm' %}" type="video/webm">
</video>
</div>
</div>
</section>
</body>
</html>
<!-- 结束代码片段 -->
英文:
Variant with flex:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.paragrah-desktop {
margin: 20px;
display: flex;
text-align: center;
}
.wrapper {
border: 2px solid black;
background: url("/images/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
color: #fff;
}
video {
width: 80%;
margin: 25px;
border: 2px solid #fff;
}
<!-- language: lang-html -->
<!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>
<link rel="stylesheet" href="/styles/main.css"/>
</head>
<body>
<section class="container" id="header">
<div class="paragrah-desktop">
<div class="subheader">
<h1 class="desktop-title">UPGRADE ALERTS</b></h1>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModal">Join
</button>
<p class="header-p">Coming to you July 2023</p>
</div>
<div class="wrapper">
<video controls>
<source src="{% static 'imgs/mobile_video.webm' %}" type="video/webm">
</video>
</div>
</div>
</section>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论