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

善微科技 2017 09月18日 发布

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


善微科技作为长沙做网站的顶级服务提供商,已经为上百家企事业单位提供了网站建设网站制作、网站改版、微信/小程序开发、网站空间租用等服务,优质的服务得到了广大客户的一致认可,如果您有网站建设、网站制作、网站设计、微信开发、小程序开发等方面的需求,请致电:400-019-8939,我们会根据您所从事的行业领域和网站类型,在最短的时间内请我们的营销顾问与您预约后上门拜访您,直接面谈交流为您解答所有的网站建设疑问。

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