Question

我正在尝试创建一个带有响应式介绍视频的网站，其中包含带有文本和播放按钮的叠加分区。

我的视频非常适合本地服务器，但是当我上传项目时，视频就不会缩放。

查看网站原型和实时问题：http://instagib.dk/westring-kbh/

此按钮暂时没有功能。问题是网站上的初始视频。它不适合/规模。我正试图在容器的背景下制作一个简短的视频。播放按钮将是一个在灯箱中打开的大型视频。只是为了保存用户一些bandwitdh

HTML：

<div class="video-container">
    <div class="video-overlay">
        <div class="video-overlay-content">
            <p class="velkommen">Velkommen</p>
            <h1 class="index-hero-text">Har du virkelig<br /> brug for et helt<br /> reklame bureau?</h1>
            <button id="play-video-btn" class="play-video-btn">Afspil video</button>
        </div>
    </div>
    <video id="index-intro-video" class="index-intro-video" preload="auto" autoplay="true" loop="loop" poster="img/westring-logo.svg">
        <source src="video/DoorMist-small.mp4" type="video/mp4" media="all and (max-width:480px)">
        <source src="video/DoorMist-small.webm" type="video/webm" media="all and (max-width:480px)">
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div>

CSS：

video-container {
    width: 100%;
    height: 100%;
    position: relative;
}
    .video-overlay {
        position: absolute;
        width: 100%;
        height: auto; 
        z-index: 2;
        color: #fff; 
    }
        .video-overlay-content {
            margin: 0 10% 0 10%;
            width: 90%;
            height: auto;
        }
            .velkommen {
                letter-spacing: 2px;
                margin-top: 20px;
                margin: 10px 0 15px 0;
                font-size: 12px;
                text-transform: uppercase;
            }

            .index-hero-text {
                font-size: 30px;
                font-size: 8vw;
                font-weight: bold;
            }

            .play-video-btn {
                width: 60px;
                height: 30px;
                margin-top: 15px;
                background: #ddd;
                z-index: 3;
            }

    .index-intro-video {
        width: 100%;
        height: auto;
        max-width: 1280px;
    }

Answer 1

我发现问题出在我自己的问题上。

我放置了一个尺寸不正确的随机占位符图片。这导致我试图描述的错误，我不知道。谢谢您的时间:)）

顺便说一句，我在这个堆栈的规则集中相当新手。如果找到解决方案，回答你自己的问题是否正确，让所有人知道这篇文章不需要进一步的帮助。

自适应视频不适合视频容器

1 个答案: