所以，我想缩放&根据用户的分辨率在网站上定位我的视频。我遇到了媒体的质疑，但并没有把它发挥作用。我不知道如何执行的想法是：如果分辨率在1800x1000-1920x1080之间，则视频将是绝对位置；____&宽度、高度等：______。然后如果1200x800-1400x1000，则视频将是绝对位置；____&宽度、高度等：______。等等
这行得通吗？有更好的方法吗？感谢
<html>
<head>
<style>
video {
position: absolute;
margin-top: -96%;
margin-left: 980px;
margin-right: 980px;
width: 360px;
display: none;
}
</style>
</head>
<body>
<video id="PrintMusic" autoplay>
<source src="https://cdn.shopify.com/videos/c/o/v/1ef399dd4bb345e485f6e4784a9d0031.mp4">
Your browser does not support the video tag.
</video>
</body>
<body>
<button onclick="playVideo()">Play</button>
<script type="text/javascript">
function playVideo() {
const video = document.querySelector('video');
video.style.setProperty('display', 'block');
video.play();
const button = document.querySelector('button');
button.style.setProperty('display', 'none');
}
</script>
</body>
</html>
您可以执行下面的代码。
不要忘记使用!important强制使用原始CSS。
@media (min-width: 1800px) and (max-width: 1920px) {
video {
position : absolute;
width: XXX !important;
height: XXX !important;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
video {
position : absolute;
width: XXX !important;
height: XXX !important;
}
}
如果你想找到更好的方法，可以使用以下方法：
video {
width: 100%;
max-height: 100%;
// responsive video
}
此处的代码段示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style type="text/css">
/* body{
background-color:lightgray;
} */
video {
position: absolute;
width: auto;
height: 600px;
}
@media (min-width: 1800px) and (max-width: 1920px) {
video {
position: absolute;
width: auto !important;
height: 200px !important;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
video {
position: absolute;
width: auto !important;
height: 400px !important;
}
}
</style>
</head>
<body>
<video id="PrintMusic" autoplay>
<source src="https://cdn.shopify.com/videos/c/o/v/1ef399dd4bb345e485f6e4784a9d0031.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>