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)