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

发表日期:2017-09-18文章编辑:善微科技浏览次数:2412 标签:    

将视频嵌入响应式网站时,您可以使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');


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.cn/news/382.html