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

我有一个启用了响应设计的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的宽度和高度

我想要的方法是

通过“视频”课程获取所有元素

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

a。该iframe的原始宽度（ow）， Biframe的原始高度（哦），以及 C父元素的宽度（cw表示容器宽度）

将iframe的宽度设置为cw

将iframe的高度设置为oh*cw/ow。（说明：cw/ow计算比例因子以保持iframe的纵横比。）

在加载时运行该函数一次

设置事件侦听器以调整窗口大小

…而不起作用的功能是：

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);

函数大小调整视频（）{
var videoPostNodeList=document.getElementsByClassName（“视频”）；
对于（变量i=0；i

这个主题的最新版本在上有售，我目前有三个视频重新录制：一个方形视频、一个水平宽屏视频和一个垂直宽屏视频。我犯了什么业余错误

元素的

offsetWidth

和

offsetHeight

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

不过，您还有其他选择，如

clientWidth

和

clientHeight

和

scrollWidth

和

scrollHeight

（不幸的是，屏幕上没有好的图像）

根据您对所需内容的描述，我建议您改为基于

scrollWidth

和

scrollHeight

属性设置

ow

和

oh

所有这些属性都是只读的，因此不能直接设置它们

如果我正确理解了这种情况，您最好的选择可能是设置元素

max width

和

max height

CSS属性（尽管您可能更愿意直接覆盖

width

和

height

）：

有关更多信息，请参阅MDN上的

元素的

offsetWidth

和

offsetHeight

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

不过，您还有其他选择，如

clientWidth

和

clientHeight

和

scrollWidth

和

scrollHeight

（不幸的是，屏幕上没有好的图像）

根据您对所需内容的描述，我建议您改为基于

scrollWidth

和

scrollHeight

属性设置

ow

和

oh

所有这些属性都是只读的，因此不能直接设置它们

如果我正确理解了这种情况，您最好的选择可能是设置元素

max width

和

max height

CSS属性（尽管您可能更愿意直接覆盖

width

和

height

）：

---

有关更多信息，请参见MDN上的。

谢谢！我想我应该很快设置CSS属性，但我没有考虑添加一个加载文档的侦听器。我已经在上面提到的链接上实现了一个功能版本。谢谢！我想我应该很快设置CSS属性，但我没有考虑添加一个加载文档的侦听器。我已经在上述链接上实现了一个功能版本。

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;
    }
}

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