javascript - JQuery 根据 iframe 源设置 iframe 高度

Question

我正在使用以下脚本设置 YouTube iframe 的高度，使其保持 16:9 的宽高比。宽度始终为容器的 100%。

脚本应该只设置 YouTube 视频的高度。如果页面上所有 iframe 的来源都相同，则此方法有效。 Youtube 嵌入设置正确，soundcloud 嵌入被忽略，但是，一旦我使用 Youtube 和 Soundcloud 源，它就会同时设置。这是有道理的，因为 iframe 的目标不是仅设置源中包含 youtu 的高度。

如何让它只设置源包含 youtu 的 iframe 的高度？

<script>

    function iframeSizing() {
        $('iframe[src*="youtu"]').each(function() {
            var containerWidth = $('iframe').width();
            iframeWidth = containerWidth;
            iframeHeight = 0.5625 * iframeWidth;

            $('iframe').css({
                'height': iframeHeight + 'px'
            });
        });
    };

    $(window).resize(iframeSizing);
    $(document).ready(iframeSizing);
</script>

谢谢

Answer 1

你的问题是你一遍又一遍地使用 $('iframe') 选择器，同时你的函数实际上并不知道你指的是哪个 iframe到。

.each() 函数中的选择器应该是 $(this) 而不是 $(iframe)。

所以，$(this).width() 和 $(this).css()

基本上，.each() 函数的工作方式是使用 $('iframe[src*="youtu"]') 遍历所有元素并然后在该函数内部，要引用循环所在的当前元素，您应该使用选择器 $(this)