Question

所以我们假设我有height: 100%的视频，并且随着浏览器的宽度调整，我希望视频使用transform: translateX()移动到中心。

这方面的一个很好的例子是batmanvsuperman.com网站（关闭开始预告片进入该网站）。当你调整浏览器的宽度（而不是高度）时，translateX值会改变，视频会移动到浏览器的中心。

我该怎么做？

我模拟了下面我将视频的宽度除以2或任何数字，以获得translateX的值。但这只是猜测......我试图获得确切的价值。

我是朝着正确的方向前进，还是应该以某种方式使用window.innerWidth？

var video = document.querySelector("video");

window.addEventListener("resize", function(){
    document.querySelector("video").style.transform = "translateX(" + video.offsetWidth/2 + "px)";
})

谢谢你们

Answer 1

如果要计算每个resize事件。

获取视频宽度。从window.innerWidth中减去它。将该数字除以2。将视频元素的margin-left或translateX值作为像素。

我认为视频事先没有翻译属性，也没有填充或边距值。

您可以使用高度值执行相同的过程。

从问题的例子中，

var video = document.querySelector("video");

    window.addEventListener("resize", function(){

        var videoWidthNumber = parseInt(getComputedStyle(video,null).getPropertyValue('width'));
        var translationX = (window.innerWidth - videoWidthNumber) / 2; 
        video.style.transform = "translateX(" + translationX.toString() + "px)";

    });

使用JQuery，

var video = $("video");

    $(window).on("resize", function(){

        var videoWidthNumber = video.width();            
        var translationX = (window.innerWidth - videoWidthNumber) / 2; 
        video.css("transform","translateX(" + translationX.toString() + "px)");

    });

Answer 2

为什么不使用CSS？ HTML：

<body>
    <div class="video-container">
        <div class="video">
            <p>Video</p>
        </div>
    </div>
</body>

CSS：

body {
    width: 100%;
    text-align: center;
    height: 100vh;
    position: relative;
}
.video-container {
    margin: 0 auto;
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.video {
    /* THESE ARE FOR DEMO PURPOSES */
    color: white;
    width: 600px;
    height: 300px;
    background: grey;
    margin: 0 auto;
}

Codepen：http://codepen.io/anon/pen/jyvvwQ

Answer 3

如果视频独立或在大小容器内，您可以调整<video>容器本身的大小，视频将调整大小并居中并跳过javascript来完成工作：

在整个页面中测试3个片段，然后调整窗口浏览器的大小以查看行为

＆＃13;

html, body {
  height:100%;
  margin:auto;
}
video {
  height:100%;
  width:100%;
}

＆＃13;

 <video  controls muted>
                    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
                    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
                    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
                </video>

＆＃13;

如果视频不是正文，而是任何其他大小的容器，那么它的工作方式相同：

＆＃13;

div {
  width:50vw
  height:50vh;
  /* see me */
  background:gray;
}
video {
  height:100%;
  width:100%;
}
/* center that div with flex:*/
html {
  height:100%;
  display:flex;/* or display:table; + width:100%;*/
}
body {
  margin:auto;
}

＆＃13;

<div> 
  <video controls muted>
                    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
                    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
                    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
                </video>
</div>

＆＃13;

或display：table

＆＃13;

div {
  height:50vh;
  /* see me */
  background:gray;
}
video {
  height:100%;
  width:100%;
}
/* center that div :*/
html {
  height:100%;
  display:table;  width:100%;
}
body {
  display:table-cell;  
  vertical-align:middle;
  text-align:center;
}
video {
  height:100%;
  width:100%;
}

＆＃13;

<div> 
  <video controls muted>
                    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
                    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
                    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
                    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
                </video>
</div>

＆＃13;

在调整窗口大小时将元素移动到屏幕中心

3 个答案: