fitvids.js-iframe影片自適應

bootstrap 的具有響應式特性的嵌入內容是可以使YouTube影片自適應，但對於如果除了內建以外的二個容器比較外其他的使用上就會有問題了，因此fitvids.js可以自定比例而也可依影片的比例自行等比縮放，非常方便

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fitVids test 视频流响应式</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.huhu').fitVids();
		});
	</script>
	<style type="text/css">
		html, body { padding:0px; margin:0px;}
		.huhu { padding:10%;}
		iframe{max-width: 100%;}
		.content{max-width: 100%;}
	</style>
	</head>
	
	<body>
		<div class="content">
			<div class="huhu">
				<iframe src="https://www.youtube.com/embed/xGrXISLgvec"></iframe>
				<iframe class="fitvidsignore" src="https://www.youtube.com/embed/xGrXISLgvec" width="600px" height="600px"></iframe>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>fitVids test 视频流响应式</title>

$(function(){

$('.huhu').fitVids();

});

</script>

html, body { padding:0px; margin:0px;}

.huhu { padding:10%;}

iframe{max-width: 100%;}

.content{max-width: 100%;}

</style>

</head>

<body>

</div>

</body>

</html>

See the Pen fitvids.js-iframe影片自適應 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

資料來源：
fitvidsjs官網
 視頻響應式—-FitVids.js的使用

標籤雲