我使用以下脚本来设置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>
感谢
答案 0 :(得分:0)
您的问题是您反复使用$('iframe')
选择器,同时您的功能实际上并不知道您指的是iframe
。
.each()
功能中的您的选择器应为$(this)
而不是$(iframe)
。
所以,$(this).width()
和$(this).css()
基本上,.each()
函数的工作方式是循环遍历$('iframe[src*="youtu"]')
的所有元素,然后在该函数内部,引用循环所在的当前元素,你应该使用选择器$(this)