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 });