Question

我已经在我们的网站上嵌入了一个视频作为标题 - 它在全屏幕上看起来很好但是当我在移动设备上调整大小或查看时它无法正确显示并且在上方和下方获得大的白色间隙。有人可以帮忙吗？

网站网址：http://www.petsubjects.co.uk/dev/index.html

<div id="ht-top-area">

    <div id="styled_video_container" class="videocontent1">
    <video width="2000px" position= "relative" autoplay loop>

Answer 1

好的，有几件事：

显示：flex;在我的浏览器上造成一个破碎的外观（你可能想要查看显示，但它不喜欢你需要在这里弯曲，只需尝试显示：阻止;视频）。
您的代码专门为顶部/底部第3337行添加填充：

#ht-top-area {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    padding: 180px 0;
}

Answer 2

试试这个！

<video position="relative" autoplay="" loop="" style="width: 100%;height: 100%;">

Answer 3

video {
   width: 100%;
   height: auto;
}

#ht-top-area {
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-repeat: no-repeat;
   width: 100%;
   padding: 0; //set this to 0 using a media query
}

Answer 4

这里有很多响应问题。当你试图让一些东西看起来很好时，不要只考虑在你工作的屏幕上看起来很好。我建议你首先使用这个css ht-top-area id（删除你自己的）。

#ht-top-area
{
    margin: 0 auto;
    padding: 0px;
    overflow: hidden;
}

而不是这个：

video, audio {
  max-width: 100%;
  margin: 0 auto;
  }

对于您放置的固定宽度的视频标记：

<video position="relative" autoplay="" loop="">...</video>

CSS响应视频

4 个答案: