Advertisement
mspotilas

Lazy loading of Youtube videos, new style

Feb 26th, 2012
1,892
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
  2. <script type='text/javascript'>
  3. //<![CDATA[
  4. // Lazy loading of youtube videos by MS-potilas 2012. Needs jQuery.
  5. // See http://yabtb.blogspot.com/2012/02/youtube-videos-lazy-load-improved-style.html
  6. // Usage:
  7. // <a class="youtube-lazy-link" style="width:560px;height:315px;" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Sibelius</a>
  8. //  - style is optional, if omitted, default width 560 and height 315 pixels is used
  9. //
  10. $(document).ready(function() {
  11.   $("a.youtube-lazy-link").each(function(index) {
  12.     var embedparms = $(this).attr("href").split("/embed/")[1];
  13.     if(!embedparms) embedparms = $(this).attr("href").split("://youtu.be/")[1];
  14.     if(!embedparms) embedparms = $(this).attr("href").split("?v=")[1].replace(/\&/,'?');
  15.     var youid = embedparms.split("?")[0].split("#")[0];
  16.     var start = embedparms.match(/[#&]t=(\d+)s/);
  17.     if(start) start = start[1];
  18.     else {
  19.       start = embedparms.match(/[#&]t=(\d+)m(\d+)s/);
  20.       if(start) start = parseInt(start[1])*60+parseInt(start[2]);
  21.       else {
  22.         start = embedparms.match(/[?&]start=(\d+)/);
  23.         if(start) start = start[1];
  24.       }
  25.     }
  26.     embedparms = embedparms.split("#")[0];
  27.     if(start && embedparms.indexOf("start=") == -1)
  28.       embedparms += ((embedparms.indexOf("?")==-1) ? "?" : "&") + "start="+start;
  29.     if(embedparms.indexOf("showinfo=0") != -1)
  30.       $(this).html('');
  31.     else
  32.       $(this).html('<div class="youtube-lazy-link-info">' + $(this).html() + '</div>');
  33.     $(this).prepend('<div style="height:'+(parseInt($(this).css("height"))-4)+'px;width:'+(parseInt($(this).css("width"))-4)+'px;" class="youtube-lazy-link-div"></div>');
  34.     $(this).css("background", "#000 url(http://i2.ytimg.com/vi/"+youid+"/0.jpg) center center no-repeat");
  35.     $(this).attr("id", youid+index);
  36.     $(this).attr("href", "http://www.youtube.com/watch?v="+youid+(start ? "#t="+start+"s" : ""));
  37.     var emu = 'http://www.youtube.com/embed/'+embedparms;
  38.     emu += ((emu.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";
  39.     var videoFrame = '<iframe width="'+parseInt($(this).css("width"))+'" height="'+parseInt($(this).css("height"))+'" style="vertical-align:top;" src="'+emu+'" frameborder="0" allowfullscreen></iframe>';
  40.     $(this).attr("onclick", "$('#"+youid+index+"').replaceWith('"+videoFrame+"');return false;");
  41.   });
  42. })
  43. //]]>
  44. </script>
  45. <style type='text/css'>
  46. a.youtube-lazy-link {
  47.   vertical-align:top;
  48.   background:#555;
  49.   width:560px; height:315px;
  50.   background-size:cover;
  51.   text-decoration:none;
  52.   color:#DDD;
  53.   text-align:left;
  54.   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  55.   display:inline-block;
  56. }
  57. a.youtube-lazy-link:hover {
  58.   text-decoration:none;
  59.   color:#FFF;
  60. }
  61. .youtube-lazy-link-div {
  62.   border:2px solid #000;
  63.   background: url(http://lh4.googleusercontent.com/-QCeB6REIFlE/TuGUlY3N46I/AAAAAAAAAaI/9-urEUtpKcI/s800/youtube-play-button.png) center center no-repeat;
  64.   position:absolute;
  65. }
  66. .youtube-lazy-link-div:hover {
  67.   background: url(http://lh5.googleusercontent.com/-oBFjswrosz4/TuHqainRc3I/AAAAAAAAAbE/t3rMQuSJdLA/s800/youtube-play-button-hover.png) center center no-repeat;
  68. }
  69. .youtube-lazy-link-info {
  70.   font-size: 110%;
  71.   padding: 2px 6px;
  72.   background: rgb(0, 0, 0);
  73.   background: rgba(0, 0, 0, 0.5);
  74. }
  75. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement