lazy-load-youtube v1.0.7
Lazy-load YouTube Iframe
JavaScript library for lazy loading YouTube videos
Working with the library
Place html markup in your project:
<div class="video__wrap">
<div class="video__item js-video-item" data-video-link="https://youtu.be/Kt-tLuszKBA">
<button class="video__play js-video-play"></button>
</div>
</div>
In the attribute data-video-link
, you need to insert a link to the YouTube video or specify an id
Example:
- https://www.youtube.com/watch?v=Y_plhk1FUQA&t=8278s <-link video
- https://youtu.be/Y_plhk1FUQA <-link video
- Y_plhk1FUQA <-id video
If necessary, you can also insert your own "placeholder" for the video:
<div class="video__item js-video-item" data-video-link="..."
style="background-image: url (img/intro.png);">
You can also add a caption to a video by adding a tag with avideo__caption
class and a js-video-caption
:
<div class="video__item js-video-item" data-video-link="...">
<span class="video__caption js-video-caption">Your text</span>
<button class="video__play js-video-play"></button>
</div>
Start
To get started, download the npm i lazy-load-youtube
library and import it into your project
Or import into your project
css
@import 'lazy-load-youtube/dist';
or connect styles in js
import 'lazy-load-youtube/dist/index.css';
js
import LazyLoadYouTube from 'lazy-load-youtube';
new LazyLoadYouTube('.js-video-item');
CDN
CSS
<link href="https://cdn.jsdelivr.net/npm/lazy-load-youtube@1.0.7/dist/index.css" rel="stylesheet">
JS
<script defer src="https://cdn.jsdelivr.net/npm/lazy-load-youtube@1.0.7/dist/index.js"></script>
HTML
<script>
document.addEventListener('DOMContentLoaded', function() {
new LazyLoadYouTube('.js-video-item');
});
</script>
Stop video
Create a button with class js-video-stop
<button class="js-video-stop">Stop Video</button>
Calling the stopVideo
method
const lazyLoadYouTube = new LazyLoadYouTube('.js-video-item');
lazyLoadYouTube.stopVideo();
Parameters
button
Changing the content of the launch button
new LazyLoadYouTube('.js-video-item', {
button: '<svg>...</svg>'
});
Button name
default value - Play video
new LazyLoadYouTube('.js-video-item', {
buttonLabel: 'Play'
});
bgImage
Remove background image
default value - true
new LazyLoadYouTube('.js-video-item', {
imageBg: false
});
qualityBg
Change the quality of the background image
default value - hqdefault
new LazyYouTubeLoad({
qualityBg: 'hqdefault'
});
- For high quality -
"hqdefault"
- For medium quality -
"mqdefault"
- For standard definition miniature -
"sddefault"
- For a thumbnail at maximum resolution -
"maxresdefault"
Name | Type | Default | Description | Extra options |
---|---|---|---|---|
button | string | svg | Button content | --- |
buttonLabel | string | Play video | For screen readers | --- |
imageBg | boolean | true | Background image | --- |
qualityBg | boolean | hqdefault | Image quality | hqdefault, mqdefault, sddefault, maxresdefault |