Question

我video的{{1}}宽度为40％。在html中，div使视频消失。设置特定大小（以像素为单位）将不适合width="100%" height="auto"。将html留空会使视频大小错误，并且侧面会出现黑条。

我在大多数其他帖子中尝试了这些建议，但似乎无法让它发挥作用。

div

Answer 1

在videojs的第5版中，您可以在视频对象上使用vjs-4-3 <video class="video-js vjs-default-skin vjs-16-9" ...> ... </video>课程，

fluid

或使用<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...> ... </video>选项

    $('#setcookie_btn').click(setCookie('{{user.get_username}}', true, 0.042));

    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length,c.length);
            }
        }
            return "";
    }

    var cookie_val = getCookie('{{user.get_username}}');

    $(window).load(function() {

        if(cookie_val == false || "" ) {
            $('#myModal').modal({backdrop: 'static', keyboard: false});    
        }

    });


</script>

来源：https://coolestguidesontheplanet.com/videodrome/videojs/

Answer 2

你必须使用丑陋的！important来覆盖视频的默认绝对位置：

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

完成后，海报图片将显示在视频之后，而不是显示在视频之上，因此您必须使用以下内容进行修复：

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

请注意，它必须与您希望它能够很好地显示的视频具有相同的比率。

Answer 3

在视频代码的HTML中，将宽度和高度设置为自动。然后使用CSS将视频ID的宽度/高度设置为100％。

将width和height属性设置为auto会使播放器像div一样工作，默认情况下没有维度。

Answer 4

这是我用来解决这个问题的方法。首先删除视频对象上的任何大小声明。

将包含元素的position属性设置为relative。

.video_container {
  position: relative;
}

将海报图像添加到包含元素，并将其宽度设置为100％，将高度设置为auto。这会强制div将自己的大小垂直放大到海报图像的高度（如果你做得恰到好处，应该与你的视频大小相同）

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

现在将.video-js的位置设置为绝对值，并将其高度和宽度设置为100％。这将导致.video-js将自身缩放到海报图像的高度和宽度，海报图像正在适当地缩放到包含div。

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

如果您使用Zencoder等服务从视频中动态获取缩略图以生成缩略图并允许用户上传视频，这将确保您的视频始终正确缩放，因为您可以从图像中获取尺寸，这将按比例缩放垂直。

Answer 5

刚刚发现： http://jsbin.com/idinaf/4/edit来自http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

希望这有助于某人。

编辑：IMO你应该尝试使用一些简单的CSS：

width: 100% !important;
height: auto !important;

Answer 6

  video[poster]{
    object-fit: fill;
}

为我做了

video.js大小适合div

6 个答案: