我一直在创建一个屏幕，图像作为背景，文本和按钮在右边，视频嵌入在左边。
首先，我尝试使用iframe，这里的图像(https://ibb.co/yq8ctjm)是可以的，但当我尝试使用标记时，问题是视频播放器会向上或向下离开背景图像，而不是在背景上方。 那么，该如何解决呢？
下面是我的IFRAME代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction screen</title>
</head>
<Style>
.choose-language {
position: relative;
top: -650px;
left: 570px;
font-family: Ubuntu;
font-style: bold;
font-size: 25px;
text-align: center;
color: white;
}
.fondo img {
width: 100%;
height: auto;
}
.background .btn {
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
.background {
position: absolute;
width: 100%;
}
.background.flexible-container {
position: absolute;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 275px;
left: 215px;
width: 50%;
height: 50%;
}
</Style>
<body>
<div class= "background"> <img src="fondo.jpg" width="100%" height="auto" style="position: relative; left: 0; top: 0;">
<a href="index.html" class="btn">START</a>
<div class="choose-language">CIRQUE DU SOLEIL</div>
<div class="flexible-container">
<iframe src="Experience our Shows in Full 360 VIRTUAL REALITY KA, KURIOS, LUZIA, & 'O' 360
VR Video.mp4" type = "video/mp4"></iframe></div>
</body>
</html>
这是我的视频代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduction screen</title>
</head>
<Style>
.choose-language {
position: relative;
top: -650px;
left: 570px;
font-family: Ubuntu;
font-style: bold;
font-size: 25px;
text-align: center;
color: white;
}
.fondo img {
width: 100%;
height: auto;
}
.background .btn {
position: absolute;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
.background {
position: absolute;
width: 100%;
}
.background.flexible-container {
position: absolute;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 275px;
left: 215px;
width: 50%;
height: 50%;
}
</Style>
<body>
<div class= "background"> <img src="fondo.jpg" width="100%" height="auto" style="position: relative;
left: 0; top: 0;">
<a href="index.html" class="btn">START</a>
<div class="choose-language">CIRQUE DU SOLEIL</div>
<div class="flexible-container">
<video autoplaysrc="Experience our Shows in Full 360 VIRTUAL REALITY KA, KURIOS, LUZIA, &
'O' 360 VR Video.mp4" type = "video/mp4"></video></div>
</body>
</html>
谢谢你的回答
如果我没说错，你是想要视频的缩略图吗？ 则需要使用HTML video poster属性。
所以你的代码应该是这样的:
<video autoplay poster="fondo.jpg">
<source src="Experience our Shows in Full 360 VIRTUAL REALITY KA, KURIOS, LUZIA, & 'O' 360 VR Video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
我还会尽量保持文件名的简短，并且在单词之间使用-而不是空格。
如果您询问如何使图像成为背景，您基本上可以在任何CSS-element上使用background-image（请参阅W3schools）。
希望这能帮上忙，如果还有什么问题，尽管问！
