diff --git a/plugins/lazyYT/assets/javascripts/lazyYT.js b/plugins/lazyYT/assets/javascripts/lazyYT.js index 5c9f7cfba1d..18644400443 100644 --- a/plugins/lazyYT/assets/javascripts/lazyYT.js +++ b/plugins/lazyYT/assets/javascripts/lazyYT.js @@ -1,61 +1,126 @@ -/*! LazyYT (lazy load Youtube videos plugin) - v0.3.4 - 2014-06-30 -* Usage:
loading...
-* Copyright (c) 2014 Tyler Pearson; Licensed MIT */ - +/*! +* lazyYT (lazy load YouTube videos) +* 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:
loading...
+*/ ;(function ($) { - 'use strict'; + 'use strict'; - function setUp($el) { - var width = $el.data('width'), - height = $el.data('height'), - ratio = $el.data('ratio'), - id = $el.data('youtube-id'), - aspectRatio = ['16', '9'], - paddingTop = 0, - youtubeParameters = $el.data('parameters') || ''; + function setUp($el, settings) { + var width = $el.data('width'), + height = $el.data('height'), + ratio = ($el.data('ratio')) ? $el.data('ratio') : settings.default_ratio, + id = $el.data('youtube-id'), + padding_bottom, + innerHtml = [], + $thumb, + thumb_img, + loading_text = $el.text() ? $el.text() : settings.loading_text, + youtube_parameters = $el.data('parameters') || ''; - if (typeof width === 'undefined' || typeof height === 'undefined') { - height = 0; - width = '100%'; - aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100; - paddingTop = aspectRatio + '%'; - } + ratio = ratio.split(":"); - $el.css({ - 'position': 'relative', - 'height': height, - 'width': width, - 'padding-top': paddingTop, - 'background': 'url(//img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat', - 'cursor': 'pointer', - 'background-size': 'cover' - }) - .html('

') - .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); - }); + // width and height might override default_ratio value + if (typeof width === 'number' && typeof height === 'number') { + $el.width(width); + padding_bottom = height + 'px'; + } else if (typeof width === 'number') { + $el.width(width); + padding_bottom = (width * ratio[1] / ratio[0]) + 'px'; + } else { + width = $el.width(); - $el.on('click', function (e) { - e.preventDefault(); - if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) { - $el.html('') - .removeClass('lazyYT-image-loaded') - .addClass('lazyYT-video-loaded'); - } - }); + // no width means that container is fluid and will be the size of its parent + if (width === 0) { + width = $el.parent().width(); + } + padding_bottom = (ratio[1] / ratio[0] * 100) + '%'; } - $.fn.lazyYT = function () { - return this.each(function () { - var $el = $(this).css('cursor', 'pointer'); - setUp($el); - }); + // + // This HTML will be placed inside 'lazyYT' container + + innerHtml.push('
'); + + // Play button from YouTube (exactly as it is in YouTube) + innerHtml.push('
'); + innerHtml.push(''); + innerHtml.push(''); + innerHtml.push(''); + innerHtml.push(''); + innerHtml.push('
'); // end of .ytp-large-play-button + + innerHtml.push('
'); // end of .ytp-thumbnail + + // Video title (info bar) + innerHtml.push('
'); + innerHtml.push('
'); + innerHtml.push('
'); + innerHtml.push(''); + innerHtml.push(loading_text); + innerHtml.push(''); + innerHtml.push('
'); // .html5-title + innerHtml.push('
'); // .html5-title-text-wrapper + innerHtml.push('
'); // 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('') + .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)); diff --git a/plugins/lazyYT/assets/stylesheets/lazyYT.css b/plugins/lazyYT/assets/stylesheets/lazyYT.css index 43e49d4c65e..732735138a0 100644 --- a/plugins/lazyYT/assets/stylesheets/lazyYT.css +++ b/plugins/lazyYT/assets/stylesheets/lazyYT.css @@ -1,36 +1,116 @@ /*! -* lazyyt -* v0.3.4 - 2014-06-30 -* Copyright (c) 2014 Tyler Pearson (http://tylerp.me); Licensed MIT %> +* lazyYT (lazy load YouTube videos) +* 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 */ -.lazyYT-title { - z-index: 100!important; - color: #fff!important; - font-family: sans-serif!important; - font-size: 12px!important; - top: 10px!important; - left: 12px!important; - 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-container { + position: relative; + display: block; + height: 0; + padding: 0 0 56.25% 0; + overflow: hidden; + background-color: #000000; } -.lazyYT-button { - margin: 0!important; - padding: 0!important; - width: 60px!important; - height: 41px!important; - z-index: 100!important; - position: absolute!important; - top: 50%!important; - 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; +.lazyYT-container iframe { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} + +/* +* 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; } diff --git a/plugins/lazyYT/plugin.rb b/plugins/lazyYT/plugin.rb index 95bc299145b..3bb49aeb996 100644 --- a/plugins/lazyYT/plugin.rb +++ b/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