Use for lazy-loading embedded videos?

[Cristy94]

I was trying to use this to lazy-load youtube videos embedded via their iframe widget, but unfortunately it doesn't work (it tries to convert the iframe source to data:image/png;base64).

Can this be updated to also support lazy-loading of iframes?

Example:

<iframe width="560" height="315" frameborder="0"  v-lazy="'//www.youtube.com/embed/' + videoID" allowfullscreen></iframe>

I would expect this video to be lazy-loaded, but using the current version it throws an error.

[hilongjw]

<lazy-component tag="div" >
  <iframe width="560" height="315" frameborder="0"  src="'//www.youtube.com/embed/' + videoID" allowfullscreen></iframe>
<lazy-component>

import { LazyComponent } from 'vue-lazyload'
export default {
  components: {
    LazyComponent
  }
}

[Cristy94]

This looks like what I need.

Currently I get this error: [Vue warn]: Unknown custom element: <lazy-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I see in the component's source code that lazy-component doesn't have any name specified, but I'm not sure that's the problem.

LE: I actually only had to only add the lazy-component in my template without adding it to the components, as lazy-component is registered as a global component when the vue-lazyload plugin is added.

[Cristy94]

This is working in my case but I see no load event for this component. Is there any way to know where the HTML contained in this component was added?

[hilongjw]

<template>
<div>
<lazy-component tag="div"  @loaded="handler">
  <iframe width="560" height="315" frameborder="0"  src="'//www.youtube.com/embed/' + videoID" allowfullscreen></iframe>
<lazy-component>
</div>
</template>

<script>
export default {
  methods: {
    handler () {
     console.log('loaded')
    }
  }
}
</script>

[Cristy94]

Although this works it would be cool to support the v-lazy directive directly on the the iframe, this way the same loaded event will be triggered too.

[JonathanDn]

It seems the lazy-component does not behave well in a nuxt + vue project for iframe . It throws the

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

error

[atazmin]

Maybe wrap in <client-only> or <ssr> ?