Question

我想根据浏览器尺寸使用javascript动态调整YouTube视频元素的位置。我不是在寻找一个纯粹的CSS解决方案，我知道我可以用填充来做到这一点，我正在寻找一个改变div的CSS的javascript解决方案。在这种情况下，我的DIV是“wrappervideo”

<script>
var viewWidth = window.innerWidth;
var viewHeight = window.innerHeight;
var narrowPadding = (((viewWidth/1.7777)-(viewHeight/1.5))/2);
var tallHeight = (viewHeight/1.5);
var tallWidth = (viewHeight/1.5)*1.7777;
var tallPadding = ((viewWidth)-(viewHeight/1.5)1.7777)/2;

function findAspectRatio() {
     if ( viewWidth/(viewHeight/1.5) >= 1.777) {
      setTimeout(narrow,0)}
     if ( viewWidth/(viewHeight/1.5) <= 1.777) {
      setTimeout(tall,0)}
     if ( viewWidth/(viewHeight/1.5) == 1.777) {
      setTimeout(equal,0)}
      }

function equal() {
    wrappervideo.style.top = '0px';
    wrappervideo.style.width = '100%'; }
function narrow() {
    wrappervideo.style.top = narrowPadding;
    wrappervideo.style.width = '100%'; }
function tall() { 
    wrappervideo.style.right = tallPadding;
    wrappervideo.style.width = tallWidth; }

 </script>

已编辑 - 这就是我目前所拥有的。有关为什么这不起作用的任何想法？

使用javascript或JQuery动态调整元素

0 个答案: