JQuery根据iframe源设置iframe高度

JQuery set iframe height depending on iframe source

本文关键字：iframe 高度 设置 JQuery 根据      更新时间：2023-09-26

我使用下面的脚本来设置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>

感谢

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

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

因此，$(this).width()和$(this).css()

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

相关文章：