Monkey Raptor

Tuesday, May 26, 2015

JavaScript and CSS: Multiple Responsive YouTube Embedded Iframes

Videos by Babba.
It was tested on (latest) Chrome, Firefox, and Opera for desktop. And for mobile, I used Chrome.
This method is pretty much clean, except some built-in player features (Chrome extensions and others) from YouTube.
Those "bugs" aren't gonna cripple the video playing.
If you're interested to use this or tinker this even further, you may want to take a look at the:
  1. CSS, to customize the styling and/or add/switch the classes.
  2. JavaScript, to... Well, that.

Using this template on HTML

So, EYT.init(a, b, c, d) function expects precisely 4 arguments:
  1. The ID of the container element (string).
  2. The object {title: video_ID} pairs.
  3. The dimensions object. It consists of height, width, and aspectRatio.
  4. The header and footer contents. It's an object.
    The value of each object key can consist of HTML tags.
    Take a look at the example above (or on demo page).

Hoy! How can I use this?
  1. Copy the template above.
  2. Go to the demo page (link below) ► view source.
  3. Copy the CSS ► then paste that into the 1st [style] tag on the template.
  4. Copy the EYT variable (highlight the thingies until you see INITIALIZE THE FUNCTION) ► then paste that into the [script] tag on the template.
  5. Provide the inputs for EYT.init() ► save the HTML (as .html) ► RUN on browser, and hopefully it will work.
Or, alternatively, download the sources from Monkey Raptor's GitHub repository.

YouTube video ID? Wut is?
While you're watching a YouTube video, look at your browser address bar. Somewhere at the end of the URL, there's ?v=[something]. That [something] is the video ID.

Or, find it on share link (click the share button below the video), you'll see is the ID

About the YouTube embedded player parameters
They're defined inside
var EYT: function (...
init: function (...
player_on = function (...
iframes[i].src = ...
You can customize those internally or maybe make them as one additional object input for the EYT.init() function.

Be careful when embedding videos
There are lots of copyrighted materials on YouTube which aren't available for embedding or are restricted on certain countries.

I'd suggest you use your own videos, or find the ones which don't put any of those restrictions.

Does the view count from embedded video with autoplay count?
Maybe yes, maybe no.
It depends on how you design it.

If it has spammy behavior, like, starts right away when the page loads, big chance it won't count.
YouTube is equipped with that never-endingly-improved automatronomagicavenger which does stuffs[like all Google's].

YouTube suggests interaction with the embedded player, videlicet the viewer clicks on the "play" button.
And like, close the page, and run away or sumthin.
Discussion at Stack Overflow

Will my YouTube ad revenue grow if I use this template?
Thank you, come again

See the independent demo page
JavaScript and CSS: Multiple Responsive YouTube Embedded Iframes

No comments

Post a Comment

Tell me what you think...