vanilla-lazyload
4 months ago
jquery.lazy.av.min.js
4 years ago
jquery.lazy.iframe.min.js
4 years ago
jquery.lazy.js
3 years ago
jquery.lazy.min.js
3 years ago
lazyload.min.js
4 years ago
loader.js
1 week ago
two_delay.js
1 week ago
two_elementor_video_to_iframe.js
4 years ago
two_lazyload.js
3 years ago
two_merge_google_font_faces.js
3 years ago
two_worker.js
2 years ago
two_yt_vi_lazyload.js
3 years ago
two_yt_vi_lazyload.min.js
3 years ago
two_yt_vi_lazyload.js
88 lines
| 1 | function replaceEmbedToImage(embedType) { |
| 2 | var className = (embedType == 'youtube') ? 'yt-lazyload' : 'vi-lazyload'; |
| 3 | var embed = document.querySelectorAll('.' + className), |
| 4 | embed_observer, |
| 5 | template_wrap, |
| 6 | template_content, |
| 7 | template_playbtn, |
| 8 | template_logo, |
| 9 | template_iframe, |
| 10 | |
| 11 | settings_observer_rootMargin = '200px 0px', //Intersection Observer API option - rootMargin (Y, X) |
| 12 | settings_thumb_base_url = (embedType == 'youtube') ? 'https://img.youtube.com/vi/' : 'https://raw.githubusercontent.com/the-muda-organization/vimeo-lazyload/master/demo-img/', //Base URL where thumbnails are stored |
| 13 | settings_thumb_extension = 'webp'; //Thumbnail extension |
| 14 | |
| 15 | if (embed.length > 0) { |
| 16 | template_wrap = document.createElement('div'); |
| 17 | template_content = document.createElement('div'); |
| 18 | template_playbtn = document.createElement('div'); |
| 19 | template_logo = document.createElement('a'); |
| 20 | template_iframe = document.createElement('iframe'); |
| 21 | template_wrap.classList.add(className + '-wrap'); |
| 22 | template_content.classList.add(className + '-content'); |
| 23 | template_playbtn.classList.add(className + '-playbtn'); |
| 24 | template_logo.classList.add(className + '-logo'); |
| 25 | template_logo.target = '_blank'; |
| 26 | template_logo.rel = 'noreferrer'; |
| 27 | |
| 28 | var allow = (embedType == 'youtube') ? 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture' : 'autoplay;fullscreen;picture-in-picture'; |
| 29 | template_iframe.setAttribute('allow', allow); |
| 30 | template_iframe.setAttribute('allowfullscreen', ''); |
| 31 | embed_observer = new IntersectionObserver(function (elements) { |
| 32 | elements.forEach(function (e) { |
| 33 | var this_element = e.target, |
| 34 | |
| 35 | this_wrap, |
| 36 | this_content, |
| 37 | this_playbtn, |
| 38 | this_logo, |
| 39 | this_iframe, |
| 40 | this_data_id = e.target.dataset.id, |
| 41 | this_data_thumb = e.target.dataset.thumb, |
| 42 | this_data_logo = e.target.dataset.logo; |
| 43 | if (e.isIntersecting === true) { |
| 44 | |
| 45 | this_wrap = template_wrap.cloneNode(); |
| 46 | this_element.append(this_wrap); |
| 47 | |
| 48 | this_content = template_content.cloneNode(); |
| 49 | this_wrap.append(this_content); |
| 50 | var urlProperty = (embedType == 'youtube') ? '--yt-lazyload-img' : '--vi-lazyload-img'; |
| 51 | if (embedType == 'youtube') { |
| 52 | var urlValue = settings_thumb_base_url + this_data_id + this_data_thumb + '/hqdefault.' + settings_thumb_extension; |
| 53 | this_content.style.setProperty(urlProperty, 'url("' + urlValue + '")'); |
| 54 | }else{ |
| 55 | // todo here we should add viemo thumbnail |
| 56 | } |
| 57 | |
| 58 | this_playbtn = template_playbtn.cloneNode(); |
| 59 | this_content.append(this_playbtn); |
| 60 | |
| 61 | if (this_data_logo !== '0') { |
| 62 | this_logo = template_logo.cloneNode(); |
| 63 | this_logo.href = (embedType == 'youtube') ? 'https://youtu.be/' + this_data_id : 'https://vimeo.com/' + this_data_id; |
| 64 | this_content.append(this_logo); |
| 65 | } |
| 66 | this_playbtn.addEventListener('click', function () { |
| 67 | this_iframe = template_iframe.cloneNode(); |
| 68 | this_iframe.src = (embedType == 'youtube') ? 'https://www.youtube.com/embed/' + this_data_id + '?autoplay=1' : 'https://player.vimeo.com/video/' + this_data_id + '?autoplay=1&autopause=0'; |
| 69 | this_content.append(this_iframe); |
| 70 | }); |
| 71 | embed_observer.unobserve(this_element); |
| 72 | } |
| 73 | }); |
| 74 | |
| 75 | }, { |
| 76 | rootMargin: settings_observer_rootMargin, |
| 77 | }); |
| 78 | embed.forEach(function (e) { |
| 79 | embed_observer.observe(e); |
| 80 | }); |
| 81 | } |
| 82 | }; |
| 83 | |
| 84 | (function () { |
| 85 | replaceEmbedToImage('youtube'); |
| 86 | replaceEmbedToImage('vimeo'); |
| 87 | })(); |
| 88 |