If iframe visible

Question

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

Answer 1

You did not specify a code that allows us to include it in your code.

Do not install src video, store it in data

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

Using any accordion triggers, $ (this) is that element of the accordion

 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

Well, that’s how it will look like this:

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

Answer 3

IF you want to do this, you can set the src iframe property, which points to the video, in the event that fires when the accordion opens. I have not worked with the accordion for some time, but I'm pretty sure there is an init event for it.

Answer 4

For those who find the answer to this question, another solution will add the lazyload effect to the content. jQuery LazyLoad Any other library can be used to achieve the same. The library also has, for example. rendering YouTube videos .