├── .gitignore
├── README.md
├── plugin
    └── youtube.rb
└── sass
    └── custom
        └── _rve.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | _site/
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | jekyll-youtube-lazyloading
 2 | ==========================
 3 | 
 4 | This Jekill/Octopress plugin improves the responsiveness on page that embed many youtube iframe by delaying the iframe creation until the user clicks on the video
 5 | 
 6 | ## How to use it 
 7 | 
 8 | add a ```{% youtube <videoid> %}``` in your markdown page
 9 | 
10 | ## Demo 
11 |   
12 | see [this page for a demo](http://erossignon.github.com/blog/2012/11/22/10-awsome-applications-with-raspberry-pi/)
13 | 
14 | 
15 | ## How to install it ?
16 | 
17 | 1. Add ```gem 'yt'``` to your ```Gemfile``` and run ```Bundle```
18 | 2. Add [your Youtube API key](https://github.com/Fullscreen/yt#apps-that-do-not-require-user-interactions) to your ```_config.yml``` file:
19 | 
20 |     ```
21 |     youtube:
22 |       api_key: <put your key here>
23 |     ```
24 | 3. Add ```youtube.rb``` to your ```plugin``` folder
25 | 4. Copy ```_rve.sccs``` to ```/sass/custom```
26 | 5. Add ```@import "custom/rve"``` to  ```/sass/screen.scss```
27 | 
28 | ## Credits
29 | 
30 | Thanks go to Anders M. Andersen for his [blogpost about responsive embeds](http://amobil.se/2011/11/responsive-embeds/) and to Portway Point for their [Jekyll Youtube Liquid Template Tag Gist](http://www.portwaypoint.co.uk/jekyll-youtube-liquid-template-tag-gist/)
31 | 
32 | Thanks to [Fullscreen](http://www.fullscreen.com/) for [yt](https://github.com/Fullscreen/yt), "The reliable YouTube API Ruby client".
33 | 
34 | ## Endorsement
35 | 
36 | If you like it feel free to endorse me: [![](http://api.coderwall.com/erossignon/endorsecount.png)](http://coderwall.com/erossignon)
37 | 


--------------------------------------------------------------------------------
/plugin/youtube.rb:
--------------------------------------------------------------------------------
  1 | #  (c) Etienne Rossignon
  2 | #  Licence : MIT
  3 | #
  4 | #  https://github.com/erossignon/jekyll-youtube-lazyloading
  5 | #
  6 | #  this liquid plugin insert a embeded youtube video to your octopress or Jekill blog
  7 | #  using the following syntax:
  8 | #    {% youtube ABCDEF123  %}
  9 | #
 10 | #  this plugin has been designed to optimize loading time when many youtube videos
 11 | #  are inserted to a single page by delaying the youtube <iframe>'s until the user
 12 | #  click on the thumbnail image of the video.
 13 | #
 14 | #  Special care have been taken to make sure tha the video resizes properly when
 15 | #  the webbrowser page width changes, or on smartphones.
 16 | #
 17 | #
 18 | #
 19 | #  a jsfiddle to experiment the lazy loading process can be found at :
 20 | #        http://jsfiddle.net/erossignon/3DZ6f
 21 | #
 22 | # credits:
 23 | #   responsive video :
 24 | #       https://github.com/optikfluffel/octopress-responsive-video-embed
 25 | #       http://andmag.se/2012/10/responsive-images-lazy-load-and-multiserve-images/
 26 | #   lazy loading:
 27 | #       http://jsfiddle.net/mUqNj/ and http://yabtb.blogspot.com/2011/12/lazy-load-youtube-videos.html
 28 | #   jekyll plugin:
 29 | #       http://makokal.github.com/blog/2012/02/24/simple-jekyll-plugin-for-youtube-videos/
 30 | #       https://gist.github.com/1805814
 31 | #
 32 | require 'json'
 33 | require 'erb'
 34 | require 'yt'
 35 | require 'digest'
 36 | 
 37 | class YouTube < Liquid::Tag
 38 |   Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/
 39 |   Cache = Hash.new
 40 | 
 41 |   def initialize(tagName, markup, tokens)
 42 |     super
 43 | 
 44 |     @cache_folder = '.jekyll-cache/youtube'
 45 |     Dir.mkdir(@cache_folder) unless File.exists?(@cache_folder)
 46 | 
 47 |     if markup =~ Syntax then
 48 |       @id = $1
 49 | 
 50 |       if $2.nil? then
 51 |           @width = 560
 52 |           @height = 315
 53 |       else
 54 |           @width = $2.to_i
 55 |           @height = $3.to_i
 56 |       end
 57 |     else
 58 |       raise "No YouTube ID provided in the \"youtube\" tag"
 59 |     end
 60 |   end
 61 | 
 62 |   def render(context)
 63 | 
 64 |     if (Cache.has_key?(@id)) then
 65 |         return Cache[@id]
 66 |     end
 67 | 
 68 |     @cache_file = File.join(@cache_folder, Digest::MD5.hexdigest("#{@id}"))
 69 | 
 70 |     if (File.exists?(@cache_file))
 71 |       @video_data = JSON.parse(File.read(@cache_file))
 72 |       Jekyll.logger.info("[Youtube]", "#{@video_data['title']} (cached)")
 73 |     else
 74 |       site = context.registers[:site]
 75 |       settings = site.config['youtube']
 76 |       api_key = settings['api_key']
 77 | 
 78 |       Yt.configure do |config|
 79 |         config.api_key = api_key
 80 |       end
 81 | 
 82 |       video = Yt::Video.new id: @id
 83 | 
 84 |       # extract the title and description
 85 |       @video_data = {
 86 |         'title' => video.title,
 87 |         'description' => video.description
 88 |       }
 89 |       Jekyll.logger.info("[Youtube]", "#{@video_data['title']}")
 90 | 
 91 |       # Cache the result in a file
 92 |       File.open(@cache_file, "w") do |f|
 93 |         f.write(@video_data.to_json)
 94 |       end
 95 |     end
 96 | 
 97 |     @style = "width:100%;height:100%;background:#000 url(https://i2.ytimg.com/vi/#{@id}/0.jpg) center center no-repeat;background-size:contain;position:absolute"
 98 | 
 99 |     @emu = "https://www.youtube.com/embed/#{@id}?autoplay=1"
100 | 
101 |     @videoFrame =  CGI.escapeHTML("<iframe style=\"vertical-align:top;width:100%;height:100%;position:absolute;\" src=\"#{@emu}\" frameborder=\"0\" allowfullscreen></iframe>")
102 | 
103 |     # with jQuery
104 |     #@onclick    = "$('##{@id}').replaceWith('#{@videoFrame}');return false;"
105 | 
106 |     # without JQuery
107 |     @onclick    = "var myAnchor = document.getElementById('#{@id}');" +
108 |                   "var tmpDiv = document.createElement('div');" +
109 |                   "tmpDiv.innerHTML = '#{@videoFrame}';" +
110 |                   "myAnchor.parentNode.replaceChild(tmpDiv.firstChild, myAnchor);"+
111 |                   "return false;"
112 | 
113 |    # note: so special care is required to produce html code that will not be massage by the
114 |    #       markdown processor :
115 |    #       extract from the markdown doc :
116 |    #           'The only restrictions are that block-level HTML elements � e.g. <div>, <table>, <pre>, <p>, etc.
117 |    #            must be separated from surrounding content by blank lines, and the start and end tags of the block
118 |    #            should not be indented with tabs or spaces. '
119 |    result = <<-EOF
120 | 
121 | <div class="ratio-4-3 embed-video-container" onclick="#{@onclick}" title="click here to play">
122 | <a class="youtube-lazy-link" style="#{@style}" href="https://www.youtube.com/watch?v=#{@id}" id="#{@id}" onclick="return false;">
123 | <div class="youtube-lazy-link-div"></div>
124 | <div class="youtube-lazy-link-info">#{@video_data['title']}</div>
125 | </a>
126 | <div class="video-info" >#{@video_data['description']}</div>
127 | </div>
128 | 
129 | EOF
130 | 
131 |     Cache[@id] = result
132 | 
133 |     return result
134 | 
135 |   end
136 | 
137 |   Liquid::Template.register_tag "youtube", self
138 | end
139 | 


--------------------------------------------------------------------------------
/sass/custom/_rve.scss:
--------------------------------------------------------------------------------
 1 | .embed-video-container {
 2 |  
 3 |  position: relative;
 4 |   /* padding-bottom: 56.25%; */ /* 16/9 ratio */
 5 |   /* padding-top: 30px; */ /* IE6 workaround*/
 6 |   height: 0;
 7 |   overflow: hidden;
 8 | 
 9 |   iframe, object, embed {
10 |     position: absolute;
11 |     top: 0;
12 |     left: 0;
13 |     width: 100%;
14 |     height: 100%;
15 |   }
16 | }
17 | .video-info {
18 |    font-size: 0.7em;
19 |    font-style: italic;
20 | }
21 | .ratio-16-9{
22 |     padding-bottom:56.25%; /* 9/16*100 */
23 | }
24 |  
25 | .ratio-4-3{
26 |     padding-bottom:75%; /* 3/4*100 */
27 | }
28 |  
29 | .ratio-1-1{
30 |     padding-bottom:100%; /* ... */  
31 | }
32 | 
33 | a.youtube-lazy-link {
34 |   vertical-align:top;
35 |   background:#555;
36 |   text-decoration:none;
37 |   color:#DDD;
38 |   text-align:left;
39 |   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
40 |   display:inline-block;
41 | }
42 | a.youtube-lazy-link:hover {
43 |   text-decoration:none;
44 |   color:#FFF;
45 | }
46 | .youtube-lazy-link-div {
47 |   width: 100%;
48 |   height: 100%;
49 |   background: url(http://lh4.googleusercontent.com/-QCeB6REIFlE/TuGUlY3N46I/AAAAAAAAAaI/9-urEUtpKcI/s800/youtube-play-button.png) center center no-repeat;
50 |   position:absolute;
51 |   top:0;
52 |   left:0;
53 | }
54 | .youtube-lazy-link-div:hover {
55 |   background: url(http://lh5.googleusercontent.com/-oBFjswrosz4/TuHqainRc3I/AAAAAAAAAbE/t3rMQuSJdLA/s800/youtube-play-button-hover.png) center center no-repeat;
56 | }
57 | .youtube-lazy-link-info {
58 |   position:absolute;
59 |   top:0.6em;
60 |   left:0.6em;
61 | }
62 | 


--------------------------------------------------------------------------------