How to embed Youtube Video with PrettyEmbed.js
INTRODUCTION
PrettyEmbed.js will help you to embed Youtube Video in a flexible and more beautiful way. If you have already had FitVids, then making Youtube Video responsive is so much easier now
REQUIREMENTS:
PrettyEmbed.js need some dependencies, they are:
- Jquery
- FitVid.js (make video responsive)
HOW TO USE
Include Javascript into your page <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>Create div to hold your video
<div id="test-video"></div>Call PrettyEmbed.js to embed Youtube Video
$(document).ready(function() {
$('#test-video').prettyEmbed({
videoID: 'Cbti19KM3wk',
useFitVids: true,
playerControls: true,
playerInfo: false
});
});HTML5
There's another way to initialize PrettyEmbed.js, using HTML5 attributes
<div class="pretty-embed" data-pe-videoid="aBcDeFg12345" data-pe-fitvids="true"></div>Then call PrettyEmbed.js
$().prettyEmbed({ useFitVids: true });