时间戳

首页 > 解决方案 > 视频标签全角IE

html - 视频标签全角IE

问题描述

我正在尝试在我的网站中实现全角显示。在 chrome 中一切正常，但现在问题出在 IE11 上。似乎视频本身没有设置为全宽。

在此处输入图像描述

正如您在图像中看到的，左右部分都有黑色部分。但是如果你看下面的图片 在此处输入图像描述

如您所见，此处的视频设置为全角。知道有什么问题吗？下面是css

.html--homepage_content {
    video {
        width: 100%;
        max-height: 100%;

        @media #{$mqMediumAndUp} {
            width: initial;
            max-height: initial;
        }
    }

    .video-player-container {
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
}

.video-player-container {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;

    video {
        width: 100% !important;
        height: 100% !important;

        @media #{$mqMediumAndUp} {
            width: initial !important;
            height: initial !important;
        }

        object-fit: cover;
        text-align: center;
    }
}

HTML

<div class="video-player-container content-block__content">
    <video autoplay="" muted="" loop="" playsinline="">
        <source src="http://website.com/video/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video> 
</div>

标签： htmlcssinternet-explorer

解决方案

可能是视频缩放模式。例如，检查https://www.sitepoint.com/community/t/how-to-fit-video-into-entire-div-that-works-on-ie-too/283224 。

如果它对您不起作用并且您知道视频尺寸，您总是可以手动缩放它并在其他 div 中偏移不可见，但这是一个丑陋的解决方案。

推荐阅读