blog.web68.vn

OUR SPONSORS

Nhúng Youtube Video vào website với PrettyEmbed


PrettyEmbed.js giúp cho việc hiển thị video từ Youtube trở nên đẹp, gọn gàng và linh hoạt hơn. Đặc biệt với khả năng hỗ trợ FitVids, việc nhúng responsive Youtube Video vào các mẫu thiết kế web trở nên dễ dàng hơn rất nhiều

 

Yêu cầu:

Để sử dụng PrettyEmbed.js, bạn cần có:

- Jquery

- FitVid.js (để Video responsive)

Sử dụng

Include Javascript vào <head></head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/mike-zarandona/PrettyEmbed.js/master/jquery.prettyembed.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js'></script>

Chèn HTML cho video

<div id="test-video"></div>

Gọi PrettyEmbed.js để nhúng Youtube Video

$(document).ready(function() {

	$('#test-video').prettyEmbed({
		videoID: 'Cbti19KM3wk',
		useFitVids: true,
		playerControls: true,
		playerInfo: false
	});

});

HTML5

Nếu bạn không muốn sử dụng cách gọi như trên, bạn có thể sử dụng thuộc tính HTML5 để khởi tạo

<div class="pretty-embed" data-pe-videoid="aBcDeFg12345" data-pe-fitvids="true"></div>

Sau đó, gọi PrettyEmbed.js

$().prettyEmbed({ useFitVids: true });

DEMO

See the Pen eDIJF by Thanh Nguyen (@genievn) on CodePen.


Tags
javascript  youtube  embed  responsive  video  jquery  plugin  
comments powered by Disqus