(2 intermediate revisions by one user not shown) | |||
Line 31: | Line 31: | ||
}); | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*! LazyYT (lazy load Youtube videos plugin) - v0.3.3 - 2014-05-19 | ||
+ | * Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-width="300" data-height="200" data-parameters="rel=0">loading...</div> | ||
+ | * Copyright (c) 2014 Tyler Pearson; Licensed MIT */ | ||
+ | |||
+ | |||
+ | ;(function ($) { | ||
+ | 'use strict'; | ||
+ | |||
+ | function setUp($el) { | ||
+ | var width = $el.data('width'), | ||
+ | height = $el.data('height'), | ||
+ | id = $el.data('youtube-id'), | ||
+ | youtubeParameters = $el.data('parameters') || ''; | ||
+ | |||
+ | if (typeof width === 'undefined' || typeof height === 'undefined' || typeof id === 'undefined') { | ||
+ | throw new Error('lazyYT is missing a required data attribute.'); | ||
+ | } | ||
+ | |||
+ | $el.css({ | ||
+ | 'position': 'relative', | ||
+ | 'height': height, | ||
+ | 'width': width, | ||
+ | 'background': 'url(http://img.youtube.com/vi/' + id + '/0.jpg) center center no-repeat', | ||
+ | 'cursor': 'pointer', | ||
+ | '-webkit-background-size': 'cover', | ||
+ | '-moz-background-size': 'cover', | ||
+ | '-o-background-size': 'cover', | ||
+ | 'background-size': 'cover' | ||
+ | }) | ||
+ | .html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>') | ||
+ | .addClass('lazyYT-image-loaded'); | ||
+ | |||
+ | $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) { | ||
+ | $('#lazyYT-title-' + id).text(data.entry.title.$t); | ||
+ | }); | ||
+ | |||
+ | $el.on('click', function (e) { | ||
+ | e.preventDefault(); | ||
+ | if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) { | ||
+ | $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" frameborder="0" allowfullscreen></iframe>') | ||
+ | .removeClass('lazyYT-image-loaded') | ||
+ | .addClass('lazyYT-video-loaded'); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | |||
+ | $.fn.lazyYT = function () { | ||
+ | return this.each(function () { | ||
+ | var $el = $(this).css('cursor', 'pointer'); | ||
+ | setUp($el); | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | }(jQuery)); | ||
+ | |||
+ | |||
+ | |||
+ | $('.js-lazyYT').lazyYT(); |
$("#mw-content-text h3").each(function(){ $(this).wrap("<div class=example></div>"); var ex_div=$(this).closest("DIV"); //ex_div.css("border","1px solid red"); //console.log(ex_div); while(ex_div.next().length && !ex_div.next().prop("tagName").match(/h3|h2|div/i)){ nextobj=ex_div.next(); //console.log(nextobj.prop("tagName")); ex_div.append(nextobj); } }); $("div.example").each(function(){ var video=$("iframe,object",this); if(video.length){ //console.log(video.eq(0),video.eq(0).prop("clientWidth")); if(video.eq(0).prop("clientWidth")<=300){ video.insertAfter($("h3",this)); $(this).css("width",300).css("float","left").css("margin","0 30px 0 0"); //console.log($(this).next().prop("className")); if($(this).next().prop("className")!="example") $(this).after("<br clear=both>"); }else { $(this).before("<br clear=both>"); } } }); /*! LazyYT (lazy load Youtube videos plugin) - v0.3.3 - 2014-05-19 * Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-width="300" data-height="200" data-parameters="rel=0">loading...</div> * Copyright (c) 2014 Tyler Pearson; Licensed MIT */ ;(function ($) { 'use strict'; function setUp($el) { var width = $el.data('width'), height = $el.data('height'), id = $el.data('youtube-id'), youtubeParameters = $el.data('parameters') || ''; if (typeof width === 'undefined' || typeof height === 'undefined' || typeof id === 'undefined') { throw new Error('lazyYT is missing a required data attribute.'); } $el.css({ 'position': 'relative', 'height': height, 'width': width, 'background': 'url(http://img.youtube.com/vi/' + id + '/0.jpg) center center no-repeat', 'cursor': 'pointer', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' }) .html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>') .addClass('lazyYT-image-loaded'); $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) { $('#lazyYT-title-' + id).text(data.entry.title.$t); }); $el.on('click', function (e) { e.preventDefault(); if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) { $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" frameborder="0" allowfullscreen></iframe>') .removeClass('lazyYT-image-loaded') .addClass('lazyYT-video-loaded'); } }); } $.fn.lazyYT = function () { return this.each(function () { var $el = $(this).css('cursor', 'pointer'); setUp($el); }); }; }(jQuery)); $('.js-lazyYT').lazyYT();