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:

CSS, to customize the styling and/or add/switch the classes.
JavaScript, to... Well, that.

Using this template on HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>YOUR PAGE TITLE</title>
        <style>
            /*
            ... the styling ..
            (EYT.css)
            */
        </style>
    </head>
    
    <body>    
        <noscript>
            <style>
                #yt_embed_container { display:none; }
            </style>
            
            <div class="center_top brown">
                THIS PAGE NEEDS JAVASCRIPT.
            </div>
        </noscript>
    
        <!-- THE IFRAMES and BUTTONS CONTAINER -->
        <div id="yt_embed_container"></div>    
        
        <script>
            var EYT = { 
                    // ... the main function block
                    // ... (EYT.js)
                };
    
            /*|=========================|**
            **| INITIALIZE THE FUNCTION |**
            **|=========================|*/        
            // #[I] Initialize the main function.
            EYT.init(                
                // ======================= //
                // List of input arguments //
                // ======================= //
                /*| #[I.1] The container element's ID |*/
                "yt_embed_container",
    
                /*| #[I.2] Object                   |**
                **|    {"title": "video ID"} pairs. |**
                **|    Put as many as you want.     |*/
                {
                    "Video title": "YouTube video ID",
                    "Video title": "YouTube video ID",
                    "Video title": "YouTube video ID",                
                    "Video title": "YouTube video ID",
                    "Video title": "YouTube video ID",
                    "Video title": "YouTube video ID",
                    "Video title": "YouTube video ID"
                },
    
                /*| #[I.3] Default dimensions and aspect ratio |*/
                {
                    /*| #[I.3.a] Dimensions in pixels |*/
                    "height": 360, 
                    "width": 640,
                    
                    /*| #[I.3.b] Aspect ratio |*/
                    "aspectRatio": 9/16
                    
                    // It can be 3/4, or 1/2, up to you.
                    // The largest number is the width ratio.
                    // Put the smallest value in front: *small_number/big_number*.
                    
                    // This feature will work on screen which has
                    // narrower width than you define above.
                },
                
                /*| #[1.4] HEADER and FOOTER CONTENT |*/
                // Customize the HEADER and FOOTER CSS from the [style] tag above.
                // Header class: .header
                // Footer class: .footer
                {
                    "header": "<div class='header'>" +
                            "...header elements..." +
                            "</div>",
    
                    "footer": "<div class='footer'>" +
                            "...footer elements..." +
                            "</div>"
                }
            );
    
            // #[II] Initialize scrolling to the top of the page.
            EYT.scroll();
        </script>
    </body>
</html>

So, EYT.init(a, b, c, d) function expects precisely 4 arguments:

The ID of the container element (string).
The object {title: video_ID} pairs.
The dimensions object. It consists of height, width, and aspectRatio.
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?

Copy the template above.
Go to the demo page (link below) ► view source.
Copy the CSS ► then paste that into the 1^st [style] tag on the template.
Copy the EYT variable (highlight the thingies until you see INITIALIZE THE FUNCTION) ► then paste that into the [script] tag on the template.
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

https://youtu.be/this 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?

NO.
Thank you, come again

See the independent demo page
RIGHT THERE

Monkey Raptor

Monkey Raptor

Tuesday, May 26, 2015

JavaScript and CSS: Multiple Responsive YouTube Embedded Iframes

No comments

Post a Comment