Lem youtube

Installation

Include JS

<script src="jquery.min.js"></script>
<script src="lem_youtube.js"></script>

Set HTML
```
<div class="youtube-video"></div>
```

Call the plugin

$(window).on('apiReady.ly', function () {
    $('.youtube-video').lemYoutube();
});

Demos

Default settings

 $(window).on('apiReady.ly', function () {
     $('.youtube-video').lemYoutube();
 });

Call methods when player ready

$(window).on('apiReady.ly', function () {
    $('.demo-item-2 .youtube-video').lemYoutube();
});
$('.demo-item-2 .youtube-video').on('onReady.ly', function () {
    $(this).lemYoutube('ytPlayer', 'playVideo');
    $(this).lemYoutube('ytPlayer', 'mute');
});

Simple external controls

$(window).on('apiReady.ly', function () {
    $('.demo-item-3 .youtube-video').lemYoutube();
});

$('.play-btn').on('click', function(){
    $('.demo-item-3 .youtube-video').lemYoutube('ytPlayer', 'playVideo');
})

$('.pause-btn').on('click', function(){
    $('.demo-item-3 .youtube-video').lemYoutube('ytPlayer', 'pauseVideo');
})

Settings

All Youtube Player parameters support

https://developers.google.com/youtube/player_parameters

Default PlayerVars

playerVars: {
    'rel': 0,
    'showinfo': 0
   }

Set options in function args

$(window).on('apiReady.ly', function () {
    $('.youtube-video').lemYoutube({
        videoId: "yu_bA7jzX5Y",
        playerVars: {
            'rel': 1,
            'showinfo': 1,
            'autoplay': 1
        }
    });
});

Set options in data attribute

$(window).on('apiReady.ly', function () {
    $('.youtube-video').lemYoutube();
});

<div
class="youtube-video"
data-lem-youtube='{"videoId": "yu_bA7jzX5Y", "playerVars": {"rel": 1, "showinfo": 1, "autoplay": 1}}'>
</div>

Methods

All IFrame API methods support

https://developers.google.com/youtube/iframe_api_reference

Example

$(window).on('apiReady.ly', function () {
    $('.youtube-video').lemYoutube();
});
$('.youtube-video').on('onReady.ly', function () {
    $(this).lemYoutube('ytPlayer', 'playVideo');
    $(this).lemYoutube('ytPlayer', 'loadVideoById', ["bHQqvYy5KYo", 50, "large"]);
});

Events

onReady

$('.youtube-video').on('onReady.ly', function () {
    $(this).lemYoutube('ytPlayer', 'playVideo');
});

onStateChange

$('.youtube-video').on('onStateChange.ly', function (event, data) {
   if (data == 0) {
       $(this).lemYoutube('ytPlayer', 'playVideo');
   }
});