Class: CS50::VideoTag

Inherits:
Tag
  • Object
show all
Defined in:
lib/jekyll-theme-cs50.rb

Overview

Inspired by gist.github.com/niquepa/4c59b7d52a15dde2367a

Instance Method Summary collapse

Methods included from Mixins

#initialize

Instance Method Details

#render(context) ⇒ Object 



309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
 
# File 'lib/jekyll-theme-cs50.rb', line 309

def render(context)
  super

  # Parse YouTube URL
  if @args[0] 
     
    # If YouTube player
    if @args[0] =~ /^https?:\/\/(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/

      # Video's ID
      v = $1

      # Default components
      components = {
        "modestbranding" => "0",
        "rel" => "0",
        "showinfo" => "0"
      }

      # Supported components
      params = CGI::parse(URI::parse(@args[0]).query || "")
      ["autoplay", "controls", "end", "index", "list", "modestbranding", "mute", "playlist", "rel", "showinfo", "start", "t"].each do |param|

        # If param was provided
        if params.key?(param)

          # Add to components, but map t= to start=
          if param == "t" and !params.key?("start")
            components["start"] = params["t"].first
          else
            components[param] = params[param].first
          end
        end
      end

      # Ensure playlist menu appears
      if !params["list"].empty? or !params["playlist"].empty?
        components["showinfo"] = "1"
      end

      # Build URL
      # https://support.google.com/youtube/answer/171780?hl=en
      src = URI::HTTPS.build(:host => "www.youtube.com", :path => "/embed/#{v}", :query => URI.encode_www_form(components))

      # Return HTML
      return "<div class='ratio ratio-16x9' data-video><iframe allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen class='border' data-video src='#{src}'></iframe></div>"

    # If CS50 Video Player
    elsif @args[0] =~ /^https?:\/\/video\.cs50\.io\/([^?]+)/
      return "<iframe allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen class='border' data-video src='#{@args[0]}'></iframe>"
    end
  end

  # Static
  return "<div class='ratio ratio-16x9'><img alt='static' class='border' data-video src='https://i.imgur.com/xnZ5A2u.gif'></div>"
end