网站建设中使用jQuery维护嵌入式视频的宽高比

将视频嵌入响应式网站时，您可以使iframes具有适合您的内容的百分比宽度，但问题是高度永远不会改变。这个jQuery代码将确保您的视频始终保持指定的宽高比。

$(window).on('resize', function() {

    $('iframe').each(function() {
                
        var $this = $(this);
                
        if ($this.data('video-aspect-ratio')) {
                    
            var dimensions     = $this.data('video-aspect-ratio');
            dimensions         = dimensions.split(':');
                    
            var newHeight     = ($this.width() / dimensions[0]) * dimensions[1];
            newHeight         = parseInt(newHeight);
                    
            $this.css('height', newHeight + 'px');
                    
        }
                
    });

}).trigger('resize');