Monkey Raptor: jQuery: Injecting iFrame Source of Embedded (YouTube) Video

This is a basic method to interactively put a (embedding allowed) video from YouTube.

Why do we need to do this? Isn't that YouTube already gives us option for embedding video using iFrame?
Second of all, YES.
And to answer the first curiosity, I give you couple of things:

It will give your blog/site has a form of interaction with the visitors. We all love interaction, don't we?
Second, it will make your page/post load faster, because the iFrame source won't be pulled in until it's injected through a click of a button.

Now, this is just the main idea of "writing" the URL source. I put a funny video here, the 3 seconds Go! Bwaaah!, it's this little girl playing catch with her dog. Let's see the demo and the video, shall we?
Courtesy of the video owner/uploader.

DEMO

Go! Bwaahh..

The steps

First, find the video you want to embed, and grab the embedded iFrame code, via share button on the bottom of that video ► embed
Second, put that code somewhere, like a notepad or something. We just need the src URL, grab it, usually like //www.youtube.com/embed/{the-video-ID}. It's using protocol relative URL. I always change the relative // to absolute (secure) protocol https://.
Third, use this CSS, element, and jQuery snippet I wrote. I'll explain the concept of the things that happened in there.
Finally, place it anywhere on your (HTML) article that needs the embedded video.

<!--///////////////////////////////////////////////////////////////-->
<!-- CSS -->
<style>
    .click-to-watch,
    .click-to-close {
        background: #42b8dd;
        font-family: consolas, courier;
        font-weight: 700;
        color: #FFF;
        text-transform: uppercase;
    }
    
    .embed-YT-wrapper {
        text-align: center;
        display: none;
        margin: 20px auto;
    }
    
    .embed-YT-iframe {
        background: #1b1b1b;
        border: 0;
        width: 420px;
        height: 315px;
        padding: 20px;
        border-radius: 10px;
    }
    
    .video-title {
        color: #000;
    }
</style>

<!--///////////////////////////////////////////////////////////////-->
<!-- elements -->
<div style='text-align:center'>
    <!-- the trigger button -->
    <button class='pure-button click-to-watch'>Click to watch</button>
</div>

<!-- the iFrame wrapper -->
<div class='embed-YT-wrapper'>
    <h2 class='video-title'>Go! Bwaahh..</h2>
    <iframe class='embed-YT-iframe' src=''></iframe>
    <br/>
    <div style='text-align:center'>
        <!-- the close button -->
        <button class='pure-button click-to-close'>Click to close</button>
    </div>
</div>

<!--///////////////////////////////////////////////////////////////-->
<!-- jQuery -->
<script>
    $(function () {
        //the watch button click event
        $('button.click-to-watch').click(function () {
          
            var position, posOffset;
            //get the watch button position and give 10px of vertical space
            position = $('button.click-to-watch').offset();
            posOffset = position.top - 10;
          
            //scroll to button
            $('html,body').animate({
                scrollTop: posOffset
            }, 500);
          
            //show (with sliding down fx) the wrapper
            $('div.embed-YT-wrapper').delay(500).slideDown(500, function () {
                //add the source attribute URL to the iFrame
                $('iframe.embed-YT-iframe')
                    .attr('src', 'https://www.youtube.com/embed/{the-video-ID}');
            });
          
        });

        //the close button click
        $('button.click-to-close').click(function () {
          
            //hide the entire wrapper
            $('div.embed-YT-wrapper').slideUp(500);
            //remove the source attribute URL
            $('iframe.embed-YT-iframe').attr('src', '');
          
        });
    });
</script>

About the CSS (element styling)

The buttons: Because I'm using Pure (CSS framework from Yahoo! - YUI) here, so the button styling library is already exist. I just put additional background color, text color, font, text-transform for it (them). You may want to change them to suit your own taste.
The iFrame wrapper: I didn't define the size on it, so it will just follow the size of space where I put it. And since it's using div element, it will be displayed as a block element by default (block display by default: 100% width and auto height, following what's inside it). Just add the text-align:center property and value, respectively, to make the elements inside it centered.
The iFrame: it's simply using a dark color #1b1b1b to "match" the embedded player color, put no border around it. Then, using the exact same player size as I got from YouTube, which is continued with adding some padding around it. Finally, sweeten it up by adding border-radius to smooth the edges.

The elements

Buttons: declared with .click-to-watch and .click-to-close classes.
Wrapper: declared with .embed-YT-wrapper class.
The iFrame: declared with .embed-YT-iframe class.
Vertical spacing: I'm using <br /> tag.
The title of video: it is wrapped using h2 (2^nd header) tag.

About the script

The script (which is triggered by a button click) will "inject" the URL to the iFrame element (<iframe>) which initially has no declared URL in it, and show the element with jQuery built-in entrance fx (slide-down), preceded by smooth scrolling down animation to the watch button. Then, if the close button is clicked, the injected URL source is cleared and hide the wrapper element (also using jQuery built-in fx, sliding up), which also has the close button inside it.

Remember to put jQuery library in the HTML before you use it on your site/blog. You can put it in before the closing </head> tag, or just right before the opening <script> tag of the example above.

About capturing the position of the button: I'm using offset() method because I have header and all other elements on top of this post, so those have to be included in the calculation.

There's a post about free public CDNs with lightning fast delivery (well, it's near speed of light), you may want to choose between them.

About embedded URL

You can use www.youtube.com/embed/{the-video-ID} or www.youtube.com/v/{the-video-ID}. Then you need to change the video ID with the ID of the video you'd like to embed.

For this method, I recommend to declare the protocol of the URL, either using http:// or https://.

That's about it. I hope this is interesting and easy enough to follow.

You may now click away from here.
See ya!

jQuery reference for capturing position

jQuery offset() method documentation
jQuery position() method documentation

Monkey Raptor

Thursday, December 19, 2013

jQuery: Injecting iFrame Source of Embedded (YouTube) Video

Go! Bwaahh..

No comments:

Post a Comment