JQuery根据iframe源设置iframe高度

时间:2015-12-22 14:30:41

标签: javascript jquery html css iframe

我使用以下脚本来设置YouTube iframe的高度,以便保持16:9的宽高比。宽度始终是容器的100%。

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

如何设置仅包含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>

感谢

1 个答案:

答案 0 :(得分:0)

您的问题是您反复使用$('iframe')选择器,同时您的功能实际上并不知道您指的是iframe

.each()功能中的您的选择器应为$(this)而不是$(iframe)

所以,$(this).width()$(this).css()

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