javascript - 使用 JavaScript 调整 Tumblr 博客上嵌入视频的大小

Question

我有一个启用响应式设计的 Tumblr 主题，并且想要调整视频 iframe 的大小。以下是页面 HTML 的示例：

/* rest of blog */
<div id="box-content">
    /* other posts; may contain more video posts */
    <div class="post video">
        <iframe src="[REDACTED]"
                style="display:block;background-color:transparent;overflow:hidden"
                class="embed_iframe tumblr_video_iframe"
                scrolling="no" frameborder="0"
                data-can-gutter="" data-can-resize=""
                data-width="500" data-height="500"
                width="500" height="500" allowfullscreen=""
                mozallowfullscreen="" webkitallowfullscreen="">
        </iframe>
        <div class="post-content">
            /* post content */
        </div>
    </div>
    /* other posts; may contain more video posts */
</div>
/* rest of blog */

我有这个函数（我认为；我从未真正学习过 JavaScript）将 iframe 的原始宽度和高度以及父级的宽度存储在变量中，并更改 iframe 的宽度和高度。

我的预期方法是

1. 使用“视频”类获取所有元素

2. 它们每个都有一个子 iframe 元素。将以下各项存储在其变量中：

   一个。iframe 的原始宽度（ow），b。iframe 的原始高度（哦）和 c。父元素的宽度（容器宽度为 cw）

3. 将 iframe 的宽度设置为 cw。

4. 将 iframe 的高度设置为 oh * cw / ow。（说明：cw / ow 计算缩放因子以保持 iframe 的纵横比。）
5. 在加载时运行该函数一次。
6. 设置窗口调整大小的事件侦听器。

...并且不起作用的功能是：

function resizeVideos() {
    var videoPostNodeList = document.getElementsByClassName("video");
    for (var i = 0; i < videoPostNodeList.length; i++) {
        var videoNode = videoPostNodelist[i].getElementsByTagName("iframe")[0];
        var ow = videoNode.offsetWidth;
        var oh = videoNode.offsetHeight;
        var cw = videoPostNodelist[i].offsetWidth;
        videoNode.offsetWidth = cw;
        videoNode.offsetHeight = oh * cw / ow;

    }
}
resizeVideos();
window.addEventListener("resize", resizeVideos);

该主题的当前版本可在testing-html.tumblr.com获得，我目前在其上转发了三个视频：一个方形视频、一个水平宽屏视频和一个垂直宽屏视频。我犯了什么业余错误？

Answer 1

1. 元素的offsetWidth和offsetHeight是对可见内容的度量，包括元素的边框、填充、滚动条（如果存在和渲染）和 CSS 宽度。
   
   不过，您确实有其他选择，例如clientWidthandclientHeight
   
   和scrollWidthand （不幸的是，在MDNscrollHeight上没有很好的图像）

   根据您对所需内容的描述，我会说您应该设置您的owandoh基于scrollWidthandscrollHeight属性。

2. 所有这些属性都是只读的，所以你不能直接设置它们。

3. 如果我正确理解这种情况，您最好的选择可能是设置元素max-width和max-heightCSS 属性（尽管您可能更喜欢直接覆盖widthand height）：

   function resizeVideos() {
       var videoPostNodeList = document.getElementsByClassName("video");
       for (var i = 0; i < videoPostNodeList.length; i++) {
           var videoNode = videoPostNodelist[i].getElementsByTagName("iframe")[0];
           var ow = videoNode.scrollWidth;
           var oh = videoNode.scrollHeight;
           var cw = videoPostNodelist[i].offsetWidth;
           videoNode.style.maxWidth = cw;
           videoNode.style.maxHeight = oh * cw / ow;
       }
   }
   

4. 最后，等到内容加载完毕后再运行（和之前一样，在调整窗口大小时也运行它）：

   document.addEventListener("DOMContentLoaded", resizeVideos);
   window.addEventListener("resize", resizeVideos);
   

有关详细信息，请参阅MDN 上的确定元素的尺寸。