Update lazyYT plugin to version 1.0.1

plugins/lazyYT/assets/javascripts/lazyYT.js

@@ -1,61 +1,126 @@
-/*! LazyYT (lazy load Youtube videos plugin) - v0.3.4 - 2014-06-30
+/*!
-* Usage: <div class="lazyYT" data-youtube-id="laknj093n" ratio="16:9" data-parameters="rel=0">loading...</div>
+* lazyYT (lazy load YouTube videos)
-* Copyright (c) 2014 Tyler Pearson; Licensed MIT */
+* v1.0.1 - 2014-12-30
-
+* (CC) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
+* http://creativecommons.org/licenses/by-sa/4.0/
+* Contributors: https://github.com/tylerpearson/lazyYT/graphs/contributors || https://github.com/daugilas/lazyYT/graphs/contributors
+*
+* Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-parameters="rel=0">loading...</div>
+*/
 
 ;(function ($) {
-    'use strict';
+  'use strict';
 
-    function setUp($el) {
+  function setUp($el, settings) {
-        var width = $el.data('width'),
+    var width = $el.data('width'),
-            height = $el.data('height'),
+    height = $el.data('height'),
-            ratio = $el.data('ratio'),
+    ratio = ($el.data('ratio')) ? $el.data('ratio') : settings.default_ratio,
-            id = $el.data('youtube-id'),
+    id = $el.data('youtube-id'),
-            aspectRatio = ['16', '9'],
+    padding_bottom,
-            paddingTop = 0,
+    innerHtml = [],
-            youtubeParameters = $el.data('parameters') || '';
+    $thumb,
+    thumb_img,
+    loading_text = $el.text() ? $el.text() : settings.loading_text,
+    youtube_parameters = $el.data('parameters') || '';
 
-        if (typeof width === 'undefined' || typeof height === 'undefined') {
+    ratio = ratio.split(":");
-          height = 0;
-          width = '100%';
-          aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100;
-          paddingTop = aspectRatio + '%';
-        }
 
-        $el.css({
+    // width and height might override default_ratio value
-            'position': 'relative',
+    if (typeof width === 'number' && typeof height === 'number') {
-            'height': height,
+      $el.width(width);
-            'width': width,
+      padding_bottom = height + 'px';
-            'padding-top': paddingTop,
+    } else if (typeof width === 'number') {
-            'background': 'url(//img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat',
+      $el.width(width);
-            'cursor': 'pointer',
+      padding_bottom = (width * ratio[1] / ratio[0]) + 'px';
-            'background-size': 'cover'
+    } else {
-        })
+      width = $el.width();
-            .html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
-            .addClass('lazyYT-image-loaded');
-            
-        var $el_title = $el.find("p.lazyYT-title");  //get reference to the current container title element
-        
-        $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
-            $el_title.text(data.entry.title.$t); 
-        });
 
-        $el.on('click', function (e) {
+      // no width means that container is fluid and will be the size of its parent
-            e.preventDefault();
+      if (width === 0) {
-            if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
+        width = $el.parent().width();
-                $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>')
+      }
-                    .removeClass('lazyYT-image-loaded')
-                    .addClass('lazyYT-video-loaded');
-            }
-        });
 
+      padding_bottom = (ratio[1] / ratio[0] * 100) + '%';
     }
 
-    $.fn.lazyYT = function () {
+    //
-        return this.each(function () {
+    // This HTML will be placed inside 'lazyYT' container
-            var $el = $(this).css('cursor', 'pointer');
+
-            setUp($el);
+    innerHtml.push('<div class="ytp-thumbnail">');
-        });
+
+    // Play button from YouTube (exactly as it is in YouTube)
+    innerHtml.push('<div class="ytp-large-play-button"');
+    if (width <= 640) innerHtml.push(' style="transform: scale(0.563888888888889);"');
+    innerHtml.push('>');
+    innerHtml.push('<svg>');
+    innerHtml.push('<path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path>');
+    innerHtml.push('<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon>');
+    innerHtml.push('</svg>');
+    innerHtml.push('</div>'); // end of .ytp-large-play-button
+
+    innerHtml.push('</div>'); // end of .ytp-thumbnail
+
+    // Video title (info bar)
+    innerHtml.push('<div class="html5-info-bar">');
+    innerHtml.push('<div class="html5-title">');
+    innerHtml.push('<div class="html5-title-text-wrapper">');
+    innerHtml.push('<a id="lazyYT-title-', id, '" class="html5-title-text" target="_blank" tabindex="3100" href="https://www.youtube.com/watch?v=', id, '">');
+    innerHtml.push(loading_text);
+    innerHtml.push('</a>');
+    innerHtml.push('</div>'); // .html5-title
+    innerHtml.push('</div>'); // .html5-title-text-wrapper
+    innerHtml.push('</div>'); // end of Video title .html5-info-bar
+
+    $el.css({
+      'padding-bottom': padding_bottom
+    })
+    .html(innerHtml.join(''));
+
+    if (width > 640) {
+      thumb_img = 'maxresdefault.jpg';
+    } else if (width > 480) {
+      thumb_img = 'sddefault.jpg';
+    } else if (width > 320) {
+      thumb_img = 'hqdefault.jpg';
+    } else if (width > 120) {
+      thumb_img = 'mqdefault.jpg';
+    } else if (width === 0) { // sometimes it fails on fluid layout
+      thumb_img = 'hqdefault.jpg';
+    } else {
+      thumb_img = 'default.jpg';
+    }
+
+    $thumb = $el.find('.ytp-thumbnail').css({
+      'background-image': ['url(http://img.youtube.com/vi/', id, '/', thumb_img, ')'].join('')
+    })
+    .addClass('lazyYT-image-loaded')
+    .on('click', function (e) {
+      e.preventDefault();
+      if (!$el.hasClass('lazyYT-video-loaded') && $thumb.hasClass('lazyYT-image-loaded')) {
+        $el.html('<iframe src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtube_parameters + '" frameborder="0" allowfullscreen></iframe>')
+        .addClass('lazyYT-video-loaded');
+      }
+    });
+
+    $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
+      $el.find('#lazyYT-title-' + id).text(data.entry.title.$t);
+    });
+
+  }
+
+  $.fn.lazyYT = function (newSettings) {
+    var defaultSettings = {
+      loading_text: 'Loading...',
+      default_ratio: '16:9',
+      callback: null, // ToDO execute callback if given
+      container_class: 'lazyYT-container'
     };
+    var settings = $.extend(defaultSettings, newSettings);
+
+    return this.each(function () {
+      var $el = $(this).addClass(settings.container_class);
+      setUp($el, settings);
+    });
+  };
 
 }(jQuery));

plugins/lazyYT/assets/stylesheets/lazyYT.css

@@ -1,36 +1,116 @@
 /*!
-* lazyyt
+* lazyYT (lazy load YouTube videos)
-* v0.3.4 - 2014-06-30
+* v1.0.1 - 2014-12-30
-* Copyright (c) 2014 Tyler Pearson <ty.pearson@gmail.com> (http://tylerp.me); Licensed MIT %>
+* (CC) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
+* http://creativecommons.org/licenses/by-sa/4.0/
+* Contributors: https://github.com/tylerpearson/lazyYT/graphs/contributors || https://github.com/daugilas/lazyYT/graphs/contributors
 */
 
-.lazyYT-title {
+.lazyYT-container {
-    z-index: 100!important;
+  position: relative;
-    color: #fff!important;
+  display: block;
-    font-family: sans-serif!important;
+  height: 0;
-    font-size: 12px!important;
+  padding: 0 0 56.25% 0;
-    top: 10px!important;
+  overflow: hidden;
-    left: 12px!important;
+  background-color: #000000;
-    position: absolute!important;
-    margin: 0!important;
-    padding: 0.5em!important;
-    line-height: 1!important;
-    font-style: normal!important;
-    font-weight: normal!important;
-    background-color: rgba(0,0,0,0.8)!important;
-    border-radius: 0.5em!important;
 }
 
-.lazyYT-button {
+.lazyYT-container iframe {
-    margin: 0!important;
+  position: absolute;
-    padding: 0!important;
+  top: 0;
-    width: 60px!important;
+  bottom: 0;
-    height: 41px!important;
+  left: 0;
-    z-index: 100!important;
+  width: 100%;
-    position: absolute!important;
+  height: 100%;
-    top: 50%!important;
+  border: 0;
-    margin-top: -22px!important;
+}
-    left: 50%!important;
+
-    margin-left: -30px!important;
+/*
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAApCAYAAABp50paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABV9JREFUeNrcWk1IK1cUvrmZGBOjJvr6xKe+Slvroi6kK6GrUkSxO12IC6GgUFBcuOlC8GdRulERV3VRQV0IKhRU0NJupK3tpi1dCRaxffWHGjWZPJNnNJlMz9FzX+ZNkzylcxP1wMdMZiYz97vnu+ee+2Njmc0GyANwgANQDCgAuABOwGOAG6AAiuh+MV3Lo+fc9KyN3qGYvnEBSAA0QBTwAnBp+P0ccAxQ6bkw/T4HRABn9B+8F6f/ZiRktjJANaCSUE0kkVApoBDgAeQTIeM7dAKjAuiG6+b7wniKstgMv+2m5xMGslgZIUAAEAOcAv4GHAL+BDwDBNMRxvOPAZ8C3iUPOVNUiGaCfgOV3MZe9z5OlSDAUzxzQZXyC+BLwM+pCtMJGCTvCTJxOlpBxGpLVzF2ajqiMvyAzwDfGuXyPuALkmyY5KGZ5GVGri1duXRyVIyOPsA7gO9R/iIYtQLKiSy7Q6T+b2UkSN7vAT4U7QGDz9Mbtp/7SPySjh9gj8EpApeyh2/YoyicuhlvhuBkVU3n2jA/cBkJxyUVjBuipz2HEf0qYcKs5w1ify6DbFVVVbSrq0s9ODhQlpaWClRVdUtWUyqLE0cPEn5CXkhI8HC8ubk5ODw8XJBIJOJNTU2H/f39j/f29jxZDJI2Iowq9nJiLk1KZWWYqcKHOC9pa2t7c21tLdTR0XHgdDo1kng22rdGQaucU2YlraY1TRPJACrIXldXVzU/P+8YHR09rqysVIkwz1JWxjmNZqQRBimbBxdIvLyvr8+7uroabGxs9NP1bAS0fOmE09Q2SsxdX19fsbCw4BgcHNzzeDxhGrDItCJO2s52hiVIO3w+X+nIyEgxRPCjmpqaE8lp7VU/nCeTMASrTO++GrTDM8UQzStB4uHOzs5niqIkJLRrLIeTG2QkpVZtthu9Fgk6amtrn8zMzLgmJyePvV7vmcVl0kUuncfuhumkiIqenh7f4uJiAJKWMwuDmS4krdyxURKOYz0Qvd0NDQ1Ri9+tKIbh050Zx+q6fjg1NaWtr6/7SO5WvTuq0ABZuNyWY7L6ycnJ0dDQ0OXc3FxFJBKxW0w4opCEcmnYrDh4Vd3c3FS7u7t929vbj6ipWT3IuOREOFeeRQ/GQqGQf2xsLNDS0vIIyBbRdU2Cgl5K2pYD+SKpF1tbW0cDAwOu5eXlKkleNdqVpMMyk3eQaioJ6zCo8M/OzsZh6Fi0v79fYsi+ZNpzJByU6WHD4AEJ4QxpfHd392hiYuJyenq64vz8XGGvrlJIHSbix46lavc60xISVjc2NsK9vb0ukHKZYeIhG00I7WpeOirxQ3xnZwc99w90MaHx8fFAa2trMZAtYcl542wYOhbXoU7xox8BvmLJFTxLCRcWFkbb29tVv9+vrKyseOnj2SL6MqUEHAA+QcJ1gDl2PTcdldCexeKXCEq5GIrizOzvgC5OUTrI/rtua1ncYsl1nlzm7CjpCKcTld3vtaQbZVlY+SJoBR4wUeHIPUyykDBOwP8mZgTYw1pQQy755N2fsGlxurgO+JUmAxyGh/V7VgHmMjspNn0D+IEZZhOwDf/FrheOn7Lkdgexkm43vfB18rF8JuQGvYCD4DSUH69/B/gccJSqgG+z630euJb6Fv3JaSCfjpBm6McTFqWKNvbqPg6eIefXSbYXVAbc8PIH4EfA1+x620NGj2Cf7KMOG7cm4fi0hK5XUw0KiG1MeHQTHBZGVrFjJ0znuEXpjIItdnX7FHRPCeLeITPt4LmtBEWNiz1XYj7MxZJbmPIJpSy5pUlUXDrPxAzKiBBJN53vk9fE/q0okY4ZVBS7jaL+FWAA/y++OTUmOgsAAAAASUVORK5CYII=')!important;
+* Video Title (YouTube style)
+*/
+
+.lazyYT-container .html5-info-bar {
+  position: absolute;
+  top: 0;
+  z-index: 935;
+  width: 100%;
+  height: 30px;
+  overflow: hidden;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.8);
+  -webkit-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
+  -moz-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
+  transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.lazyYT-container .html5-title {
+  padding-right: 6px;
+  padding-left: 12px;
+}
+
+.lazyYT-container .html5-title-text-wrapper {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+  white-space: nowrap;
+}
+
+.lazyYT-container .html5-title-text {
+  width: 100%;
+  font-size: 13px;
+  line-height: 30px;
+  color: #ccc;
+  text-decoration: none;
+}
+
+.lazyYT-container .html5-title-text:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+
+/*
+* Thumbnail
+*/
+
+.ytp-thumbnail {
+  padding-bottom: inherit;
+  cursor: pointer;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+/*
+* Play button (YouTube style)
+*/
+
+.ytp-large-play-button {
+  position: absolute;
+  top: 50% !important;
+  left: 50% !important;
+  width: 86px !important;
+  height: 60px !important;
+  padding: 0 !important;
+  margin: -29px 0 0 -42px !important;
+  font-size: normal !important;
+  font-weight: normal !important;
+  line-height: 1 !important;
+  opacity: .9;
+}
+
+.ytp-large-play-button-svg {
+  opacity: .9;
+  fill: #1f1f1f;
+}
+
+.lazyYT-image-loaded:hover .ytp-large-play-button-svg,
+.ytp-large-play-button:focus .ytp-large-play-button-svg {
+  opacity: 1;
+  fill: #cc181e;
 }

plugins/lazyYT/plugin.rb

@@ -1,6 +1,6 @@
 # name: lazyYT
 # about: Uses the lazyYT plugin to lazy load Youtube videos
-# version: 0.1
+# version: 1.0.1
 # authors: Arpit Jalan
 
 # javascript