Question: Is there a way to only load embedded Spotify Iframes when hovering?

I have this Backbone App where I have bunch of playlists embedded inside an iframe, but the page is pretty slow and heavy because it loads all playlists at once.

I tried to add the `lazysizes`-plugin, but it doesnt seem to work/help (speed remains the same)

So, my HTML looks pretty simple:

```
<iframe class="lazyload playList" data-src="" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>

```

**EDIT**

Here is my script

```
this.collection.each(function(spotify, index) {
    var service = spotify.get('services').spotify,
        s=service.match(/[^\/:]*$/);
        $('iframe.playList').eq(index+3).attr('data-src', 'https://embed.spotify.com/?uri=spotify:user:digster.dk:playlist:'+s);    
});

```

I have up to 16 playlists at once on a page, so the `data-src` is different for each iframe of course

Anyone have an idea or suggestion?

Answer: 
This is what i would do:

<http://jsfiddle.net/vjw7o9ha/>

Basically, you create all the iframes without the `src`, and on hover, you use jquery to set the source.

This is just an example, you can create a much better code starting from this.
Using mouseover directly on an iframe might be problematic, because an iframe is a different document.

In case you have used lazySizes (I hope you not hsut added the class, but also changend src to data-src) you can try to so something like this:

1. Add iframe with data-src, but without class="lazyload"
2. On domready or later on window.onload add the class lazyload

<iframe data-src="spotify.html">/iframe>

$(window).on('load', function(){
 $('iframe[data-src]').addClass('lazyload');
});