WordPress插入视频的自动缩放

随着手机的发展,响应屏幕分辨率大小的网页设计越来越流行。相比图片,插入视频的自动缩放要难一些。对于支持html5标签的视频,实现自动缩放比较简单:

video {max-width: 100%;height: auto;}

但是大多数视频如优酷,土豆等都不支持,所以可以想办法强制执行。首先将插入的视频用div层包裹起来,然后设置改层的属性类例如.video以及内部objectembed的属性:

.video {position:relative;padding-bottom:56.25%;padding-top:30px;height:0;
overflow:hidden;}
.video object, .video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

其中56.25%可以是50%-60%之间的数,56.25%对应于16:9的视频。参考资料见:CSS: Elastic VideosCreate fluid width videos

2012.9.17更新:

先前的方法需要另外添加html层包围元素,对于经常改版的话需要修改每个视频的对应元素,十分的不方便,所以最方便的办法还是利用jquery来实现,一劳永逸。代码如下:

var $allVideos = $("iframe[src^='https://www.youtube.com'], object, embed"),
    $fluidEl = $("body");
	    	
	$allVideos.each(function() {
	
	  $(this)
	    // jQuery .data does not work on object/embed elements
	    .attr('data-aspectRatio', this.height / this.width)
	    .removeAttr('height')
	    .removeAttr('width');
	
	});
	
	$(window).resize(function() {
	
	  var newWidth = $fluidEl.width();
	  $allVideos.each(function() {
	  
	    var $el = $(this);
	    $el
	        .width(newWidth)
	        .height(newWidth * $el.attr('data-aspectRatio'));
	  
	  });
	
	}).resize();

实际应用时需要将上面的“body”改成你视频所在的外围fluid层。参考资料:Fluid Width Video


除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/wordpress-video-insertion-for-automatic-scaling/

已有10条评论