How to lazyload a iframe with caching in mind

Question

I used this method before.

<iframe data-src="https://youtube.com/...?autoplay=1"></iframe>

On event with javascript I turned the data-src to src and the video started to play.

I had browser caching problems with that, videos autoplaying in background (I load a thumbnail in place for the actual iframe) when going back in the browser. Because of that I switched to a method where I just load the iframe inside a comment

<!--<iframe src="https://youtube.com/...?autoplay=1"></iframe>-->

and then remove the comment on click. I saw Google using this exact method on Google plus. Problem is caching again now, this time server side. I think very likely cloudflairs auto minify is removing HTML comments.

A quick search showed my its probably not possible to mark comments to they wont removed with cloudfliar. On top if this its a wordpress plugin so the issue is still relevant to all kinds of caching plugins that remove HTML comments.

So now my question is. Is there better method lazyloading iframes without HTML comments? I like to still somehow store the iframe in place ... well just as I am writing this I may be able to store the data to build a iframe in some random tag json encoded or something and then build the iframe on click.

Answer 1

The other method putting it into script was actually again causing W3Tc surround with with [CDATA] messing with my code.

This is my new and hopefully final method. I really like it. The data() gives me the attributes as it comes in. Little big on the HTML but I think finally I am save from caching plugins.

HTML

<div class="arve-lazyload" data-allowfullscreen="" data-class="arve-iframe fitvidsignore" data-frameborder="0" data-name="" data-sandbox="allow-scripts allow-same-origin" data-scrolling="no" data-src="https://www.youtube-nocookie.com/embed/w68VZ8C1Q24?iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;autohide=1&amp;playsinline=1&amp;autoplay=1"></div>

jQuery

lazyload = wrap.find('.arve-lazyload');

if ( lazyload.length ) {
  $('<iframe></iframe>').attr( lazyload.data() ).insertAfter( lazyload );
}

Answer 2

Just came across this.

So this the <script> tag could be a good solution, no modification of data needed, but prevents the browser from doing anything with it.

HTML

<script type="text/html" class="arve-lazyload">
<iframe src="https://youtube.com/...?autoplay=1"></iframe>
</script>

jQuery

    var lazyloaded_iframe = $('.arve-lazyload');

    $( lazyloaded_iframe.html() ).insertAfter( lazyloaded_iframe );