我想把一个框架放在一个css模式中，但是它的显示方式不是最令人愉快的，而且，因为我手动调整了（顶部和左侧），对于其他屏幕尺寸，图像配置错误（框架在模式之外）。
在大屏幕上
小屏幕显示
我使用以下代码来获得上述结果
<!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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
background: lightgray;
}
.frame-card {
width: 800px;
height: 520px;
position: absolute;
top: 25%;
left: 31.2%;
}
</style>
</head>
<body>
<div class="container mt-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-toggle="modal"
data-src="https://player.vimeo.com/video/58385453?badge=0&autoplay=1&loop=1" data-target="#myModal">
Play Vimeo Video
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
allow="autoplay">
</iframe>
</div>
</div>
</div>
</div>
<img class="frame-card" src="https://uploaddeimagens.com.br/images/004/266/329/original/frame-card.png?1671470988">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script>
$(document).ready(function () {
// Gets the video src from the data-src on each button
var $videoSrc;
$('.video-btn').click(function () {
$videoSrc = $(this).data("src");
});
// when the modal is opened autoplay it
$('#myModal').on('shown.bs.modal', function (e) {
// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
$("#video").attr('src', $videoSrc);
})
// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function (e) {
// a poor man's stop video
$("#video").attr('src', $videoSrc);
})
// document ready
});
</script>
</body>
</html>我应该使用什么类或样式？
先谢了!
我使用了绝对值的位置属性来对齐图像，我不知道这是否是正确的方法，此外，我使用了左对齐和上对齐，我希望有一个更"自动"的方式来对齐图像。
1条答案
按热度按时间qni6mghb1#
我不完全确定你想要的结果，但是我已经设法把框架整齐地放在了视频周围。将
.frame-card移到.embed-responsive.embed-responsive-16by9内的iframe之后，只给它.embed-responsive-item，不需要额外的样式，因为它将与视频（iframe.embed-responsive-item）具有相同的大小/位置。备注：
您需要将
&muted=1添加到您的视频源URL，以便自动播放工作：https://vimeo.zendesk.com/hc/en-us/articles/115004485728-Autoplay-and-loop-embedded-videos该视频在片段中不起作用，但您可以在我的fiddle中查看它。