Currently, I have implemented a script to adjust the height of YouTube iframes in order to maintain a 16:9 aspect ratio while keeping the width at 100% of the container.
The challenge I am facing is ensuring that the script only affects YouTube videos and not other embed sources like SoundCloud. When all iframes on the page share the same source, the script works perfectly. However, when a mix of YouTube and SoundCloud sources are used, it adjusts the height of both types of iframes. This occurs because the script does not specifically target only those with 'youtu' in the source URL.
My question is, how can I modify the script to only set the height of iframes containing 'youtu' in the source?
<script>
function iframeSizing() {
$('iframe[src*="youtu"]').each(function() {
var containerWidth = $(this).width();
var iframeWidth = containerWidth;
var iframeHeight = 0.5625 * iframeWidth;
$(this).css({
'height': iframeHeight + 'px'
});
});
};
$(window).resize(iframeSizing);
$(document).ready(iframeSizing);
</script>
Thank you for any assistance!