使用 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 的高度。

我想要的方法是

获取class"video"
它们每个都有一个子 iframe 元素。将以下各项存储在其变量中：

一个。 iframe 的原始宽度 (ow)， b. iframe 的原始高度（哦），以及 C。父元素的宽度（容器宽度的 cw）
将 iframe 的宽度设置为 cw。
将 iframe 的高度设置为 oh * cw / ow。（解释：cw/ow计算比例因子来保持iframe的纵横比。）
运行加载一次函数。
为 window 调整大小设置一个事件侦听器。

...无效的函数是：

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

元素的 offsetWidth 和 offsetHeight 是对可见内容的度量，包括元素的边框、填充、滚动条（如果存在并呈现）和 CSS 宽度.

不过你还有其他选择，比如 clientWidth 和 clientHeight

以及 scrollWidth 和 scrollHeight（不幸的是在 MDN 上没有很好的图像）

根据您对所需内容的描述，我认为您应该根据 scrollWidth 和 scrollHeight 属性设置 ow 和 oh。
所有这些属性都是只读，因此您不能直接设置它们。

如果我理解正确，你最好的选择可能是设置元素 max-width 和 max-height CSS 属性（尽管你可能更喜欢直接覆盖 width 和 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;
    }
}

最后，在运行之前等待内容加载完毕（和之前一样，运行它也会 window 调整大小）：
```
document.addEventListener("DOMContentLoaded", resizeVideos);
window.addEventListener("resize", resizeVideos);
```

有关详细信息，请参阅 MDN 上的 Determining the dimensions of elements。

使用 JavaScript 调整 Tumblr 博客上的视频嵌入

Resize video embeds on Tumblr blog with JavaScript

javascript

iframe

tumblr

tumblr-themes