Question

我尝试在网页上制作嵌入式Vimeo视频。目前它有响应，并希望保持响应。它现在看起来在网络上看起来太大了（对手机尺寸感到满意） - 它如何让它变得更小？

＆＃13;

.video_wrapper {
    position: relative;
    padding-bottom: 56.25%;
}

.video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<div class="video_wrapper">
    <iframe src="https://player.vimeo.com/video/24799548" width="700" height="525" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

＆＃13;

这是指向我页面的链接 https://bkwon0402.github.io/item/uxvideo.html

提前致谢！

Answer 1

您只需更改width和height：

即可

.video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

并将其设置为90％。

Answer 2

这样的事情应该有效：

.video_wrapper iframe {
    width: 75%;
    height:75%;
    margin: auto;
    padding: 0;
    background-color: transparent;
    overflow: hidden;
}

看起来我已经将背景：透明并放置边距：auto以使其保持居中。

调整视频大小并保持响应

2 个答案: