Youtube Onebox revisited


(Spero Koulouras) #1

AFAIK the current onebox implementation works with urls of the form: YouTube

This form of the URL accepts limited player parameters while alternate forms offer a much bigger parameter list that can come in very handy (better playlist control, branding, looping, etc). I am not competent to modify the existing onebox implementation without help. Any thoughts on how tough it would be to support these alternate forms?

http://www.youtube.com/v/
YouTube
http://www.youtube.com/apiplayer?video_id=

Continuing the discussion from Youtube times feature for replies to an embedded youtube video?:


(Kane York) #2

It already supports youtu.be and ?t= and #t= as well, and &loop and &start=1m&end=2m.


(Spero Koulouras) #3

Yes - those functions are supported but there are a bunch more options available with the other forms of the URL that are of value. The official Google docs list all of them, and most are not available with the /watch form of the URL.

The ones we care about are:

  • autohide (for the controls)
  • rel (to enable/disable related videos)
  • showinfo (title information display)

The challenge we have is that on our YouTube channel it is beneficial to have videos in a playlist that will automatically roll from one to the next. Within the forum this behavior is NOT desirable - we want to stop after playing 1 video and discuss it. The rel= parameter lets us accomplish that, but it is not available with the /watch form of the URL, and the other YouTube URLs don’t onebox correctly.


(Kane York) #4

Ah, but you COULD include a magic parameter that the oneboxer interprets to set the rel value :wink:


(Spero Koulouras) #5

OK, so never having written a line of Ruby in my life, would adding something like this at line 81 get the job done? Then I need to figure out how to make this a plugin? About time I learned how …

Documented Youtube parameter definitions are all in the form key=[0…3]

p['rel'] = params['rel'] if params.include? 'rel'
p['autohide'] = params['autohide'] if params.include? 'autohide'
p['cc_load_policy'] = params['cc_load_policy' if params.include? 'cc_load_policy'
p['fs'] = params['fs'] if params.include? 'fs'
p['hl'] = params['hl'] if params.include? 'hl'
p['iv_load_policy'] = params['iv_load_policy'] if params.include? 'iv_load_policy'
p['modestbranding'] = params['modestbranding'] if params.include? 'modestbranding'
p['color'] = params['color'] if params.include? 'color'
p['theme'] = params['theme'] if params.include? 'theme'

(Kane York) #6

I would turn that into a loop instead of repeating it every time.

Also, do we really need all those to be supported?


(Spero Koulouras) #7

Yes - this is the brain-dead way of doing it. Creating an array of parameters of interest and looping through it would be nicer. Whatever the correct Ruby syntax is for something like this:

[ 'rel', 'autohide', 'cc_load_policy', 'fs', 'hl', 'iv_load_policy', 'modestbranding', 'color', 'theme' ].each { |ytparm|
  p[ytparm] = params[ytparm] if params.include? ytparm }

Of the 24 available parameters for the YouTube players I tried to pick the most useful.

  • rel is important to prevent playing every video in a playlist
  • modestbranding gets rid of YouTube logos
  • color and theme help the player match the site they site they are part of
  • autohide may improve the user experience
  • closed captioning may be important to somebody (not to me)
  • disabling full screen is important
  • annotations (iv_load_policy) I don’t really care about

(Jeff Atwood) #8

This is the kind of request that could get prioritized for a Discourse customer. Too bad you aren’t a customer! :wink:


(Kane York) #9

LGTM, feel free to PR that to the onebox repository


(Spero Koulouras) #10

@codinghorror - We would rather host with you than at Amazon. A couple things block us:

  1. I don’t think we can use the locale-override plugin if we host with you. The customized strings are important to us.
  2. We are integrated with a SquareSpace front end and use the Discourse API from SquareSpace, requiring a custom X-Frame-Options setting to allow cross-domain operation. We use the API to create new topics from a simple box (less confusing than the markdown editor for a certain class of users). We also plan to use the API to extract recent posts related to videos.

If I am wrong about these items we would gladly become a customer.

@riking - Having never created a PR and being a complete novice with Ruby I’ll probably screw something up. You are forewarned.


(Sam Saffron) #11

give it a shot, don’t be afraid we will help you out by reviewing it.


(Spero Koulouras) #12

@sam and @riking - Being able to submit a PR means:

  • executing the Discourse Contributor Agreement (not a problem)
  • setting up a Discourse Development Environment that actually works
  • Making the change
  • Testing it
  • Submitting the PR

All of this is good stuff that I have been putting off for months and will try to get done in the next day or two. If I fail, then please feel free to grab this code and insert it the right way. My biggest blocker right now is understanding exactly how to deploy the modified file on to my Discourse instance. I have no idea how to add the modified “onebox” code back into Discourse. As it is approaching 1AM, it will wait until later today …


(Sam Saffron) #13

No probs, keep in mind, when working on onebox you only need a limited dev environment not the full Postgres + Redis environment.


(Mittineague) #14

Go for it. a custom onebox is a good place to start i.e.

  • Save a file whatever_name_onebox.rb in the lib/onebox/engine folder
module Onebox
  module Engine
    class WhateverNameOnebox
      include Engine
 
      matches_regexp /^http:\/\/www\.domian\.com\/forums\/.*/
 
      def to_html
        "<iframe src='#{@url}' style='border-width:0' frameborder='0' scrolling='no' width='100%'></iframe>"
      end
    end
  end
end

Regex might be tricky, and I hope you have better design skills than I do, but this will hopefully give you a starting point.

* my iframe line is a single but it got crunched here.