CODEWITHSUNDEEP
iframeyoutubepagespeed
brandozz
brandozz

Reputation: 1119

YouTube embeds slowing down page

I have a page with a bunch of thumbnail images that when clicked open embedded youtube videos in modals.

Here is the html:

<li>

                    <div class="videoLd">

                        <a class="video-link" title="Video Title" href="#video" role="button" data-toggle="modal" data-id="youtubeid">

                            <img class="responsive-imamge" src="//www.mysite.com/video.jpg" alt="" >

                        </a>


                            <h4>Video Title</h4>


                        <p>Video Description</p>


                        <div id="video" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <img src="www.mysite.com/close-modal.png" alt=" ">
                            </button>

                            <div class="modal-body">
                                <div class="video-wrapper">
                                    <!-- on click the iframe will append here -->                                       
                                </div>
                            </div>

                        </div>

                    </div>


                </li>

I'm displaying a list of 5 video thumbnails this way. This has really slowed down my page load time. Before adding the videos the page loaded 61% faster than the avg on my site. Now it's 21% slower.

Is there a way to optimize these videos so they only load when the video thumbnail is clicked?

EDIT

Thought I'd update this and share what I'm actually using now. Instead of using the lazyYT plugin I created a simple on click function that appends the iframe to a container div. The link to the video has a data-id attribute that contains the youTube video id. 

$('.video-link').on('click', function () {
    var youTubeID = $(this).data('id');
    var code="<iframe width='1280' height='720' src='//www.youtube.com/embed/" + youTubeID + "?rel=0&autoplay=1' frameborder='0' allowfullscreen=''></iframe>";
    $(this).parent().find('.video-wrapper').append(code);
});

Upvotes: 2

Views: 5483

Answers (1)

Deano
Deano

Reputation: 2895

Have you thought about lazy loading the Youtube videos instead?

I haven't used it myself, but this jQuery plugin will lazy load Youtube videos. Here is another plugin that will lazy load, but unfortunately it seems that both of them require jQuery which isn't ideal unless your site is already using it.

There is also another answer on SO that covers this question and might give you more insight.

Upvotes: 1

Related Questions