Have iframe load when visible

Question

I have a page with about 100 videos on them (youtube) loading an iframe. They are all in an accordion style menu, I was wondering if there was a way to have them load when the accordion is open or the iframe is visible on the page. Right now it takes up way too much memory and lags the page a lot.

Answer 1

You haven't shown any code that allows us to include this in your code.

Don't set the src of the video, store it in data

<iframe src="about:blank" data-src="http://youtu.be/etc"></iframe>

Using whatever triggers the accordion, $(this) being that accordion item

var $iframe=$(this).find('iframe');
if ($iframe.data('src')){ // only do it once per iframe
    $iframe.prop('src', $iframe.data('src')).data('src', false);
}

Answer 2

Okay so it will go as follow:

HTML

<div id="accordion">
    <h3>Video 1</h3>
    <div class="content" data-link="//www.youtube.com/embed/nlcIKh6sBtc">
        <iframe width="200" height="200" src="" frameborder="0"></iframe>
    </div>

    <h3>Video 2</h3>
    <div class="content" data-link="//www.youtube.com/embed/My2FRPA3Gf8">
        <iframe width="200" height="200" src="" frameborder="0"></iframe>
    </div>

    <h3>Video 3</h3>
    <div class="content" data-link="//www.youtube.com/embed/CevxZvSJLk8">
        <iframe width="200" height="200" src="" frameborder="0"></iframe>
    </div>
</div>

javascript

var elements = document.getElementsByClassName("content"), bubbles = false;

var observer = new WebKitMutationObserver(function (mutations) {
  mutations.forEach(attrModified);
});

for(var i = 0; i < elements.length; i++){
    observer.observe(elements[i], { attributes: true, subtree: bubbles });
}

function attrModified(mutation) {
    var contentStyle = mutation.target.getAttribute("style");
    var IsVisible = contentStyle.indexOf("block") != -1;
    if(!IsVisible){
        var $currentIframe = $(mutation.target).children("iframe");
        $currentIframe.attr("src", "");
    }
    else{
        var link = $(mutation.target).data("link");
        var $currentIframe = $(mutation.target).children("iframe");
        $currentIframe.attr("src", link);
    }
}

$("#accordion").accordion();

Example: AccordionLoadFrame