Requirements:
- Include jQuery Library on your page.
- jQuery YouTube Lazy-Loader Plugin Library which you can get from GitHub.
Usage:
- Add a container div on your page to hold the YouTube player
<div class="youtube" data-youtube="4eYSpIz2FjU" style="width:320px; height:240px;"></div>
-
Make sure you specify the
width and height of the container by using CSS or inline styling as shown above.
-
Use
data-youtube attribute for YouTube Id for the container.
- And finally, initialize the Plugin on page load:
<script type="text/javascript">
$(function () {
$(".youtube").YouTubeLazyLoader();
});
</script>
- Configure the plugin using options listed below.
Configuration Options:
- youtubeId: Use it to override the YouTube Id using JavaScript.
- title: Override the title text. To get the title from YouTube, leave this blank.
- embedTitle: (default: false) Embed the video title in the container.
- titlePosition: (default: bottom) or top, Position of the title div in the container. You can style the title div by customizing
.YouTubeLazyLoadBox .title{ } css class.
- idAttribute: (default: data-youtube) Attribute containing the YouTube Id.
- cssClass: (default: YouTubeLazyLoadBox) Attribute containing the CSS class to be assigned to the container div.
- Rest of the options are used to configure the YouTube player. For more help on these options, please refer YouTube Embedded Player Parameters on YouTube API website.
Demo Code (Test):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery YouTube Lazy-Loader Plugin Demo</title>
<style>
.youtube{
width: 640px;
height: 480px;
}
</style>
</head>
<body>
<!-- YouTube player container -->
<div class="youtube" data-youtube="4eYSpIz2FjU"></div>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.youtube.lazyloader.min.js"></script>
<script type="text/javascript">
$(function () {
$(".youtube").YouTubeLazyLoader();
});
</script>
</body>
</html>