A standard copy-and-paste YouTube embed lands on your page as an which loads a big ol’ pile of other stuff to play that video. But the UX of it is still essentially an image and a play button. Click the play button and the video plays. You can build essentially the same thing with an anchor link wrapping an image!<br /> Not long ago, we covered a very clever “lazy load” technique doing exactly this from Arthur Corenzan that was further improved by Remy Sharp and Adrian Roselli.<br /> Paul Irish has tackled it as well with a <lite-youtube> web component:<br /> Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.<br /> In the source code, Paul dug up some other prior attempts as well, like this jQuery plugin and a more generic script for lazy loading any iframe.<br /> Direct Link ?</p> <span class="cp-load-after-post"></span></div><div class="post-meta wf-mobile-collapsed"><div class="entry-meta"><span class="category-link">Categories: <a href="https://skynetch.com/category/latest-technologies/" >Latest technologies</a>, <a href="https://skynetch.com/category/software-applications/" >software applications</a>, <a href="https://skynetch.com/category/ui-ux-layout/" >UI / UX layout</a>, <a href="https://skynetch.com/category/uncategorized/" >Uncategorized</a></span><a class="author vcard" href="https://skynetch.com/author/admin/" title="View all posts by admin" rel="author">By <span class="fn">admin</span></a><a href="https://skynetch.com/2020/08/25/" title="11:23 am" class="data-link" rel="bookmark"><time class="entry-date updated" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></a></div><div class="entry-tags">Tags: <a href="https://skynetch.com/tag/design/" rel="tag">Design</a><a href="https://skynetch.com/tag/marketing-and-seo/" rel="tag">Marketing and SEO</a><a href="https://skynetch.com/tag/mobile-apps/" rel="tag">Mobile apps</a><a href="https://skynetch.com/tag/quality/" rel="tag">Quality</a><a href="https://skynetch.com/tag/seo/" rel="tag">Seo</a><a href="https://skynetch.com/tag/software/" rel="tag">Software</a><a href="https://skynetch.com/tag/sofware-applications/" rel="tag">Sofware applications</a><a href="https://skynetch.com/tag/technology/" rel="tag">Technology</a><a href="https://skynetch.com/tag/web-applications-development-web-applications/" rel="tag">Web applications development Web applications</a><a href="https://skynetch.com/tag/website-creation/" rel="tag">Website creation</a></div></div><div class="single-share-box"> <div class="share-link-description">Share this post</div> <div class="share-buttons"> <a class="facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F642%2F&t=lite-youtube-embed" title="Facebook" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on Facebook</span><span class="screen-reader-text">Share on Facebook</span></a> <a class="twitter" href="https://twitter.com/share?url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F642%2F&text=lite-youtube-embed" title="Twitter" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Tweet</span><span class="screen-reader-text">Share on Twitter</span></a> <a class="pinterest pinit-marklet" href="//pinterest.com/pin/create/button/" title="Pinterest" target="_blank" data-pin-config="above" data-pin-do="buttonBookmark"><span class="soc-font-icon"></span><span class="social-text">Pin it</span><span class="screen-reader-text">Share on Pinterest</span></a> <a class="whatsapp" href="https://api.whatsapp.com/send?text=lite-youtube-embed%20-%20https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F642%2F" title="WhatsApp" target="_blank" data-action="share/whatsapp/share"><span class="soc-font-icon"></span><span class="social-text">Share on WhatsApp</span><span class="screen-reader-text">Share on WhatsApp</span></a> <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F642%2F&title=lite-youtube-embed&summary=&source=Skynetch" title="LinkedIn" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on LinkedIn</span><span class="screen-reader-text">Share on LinkedIn</span></a> </div> </div> <div class="author-info entry-author"> <span class="author-avatar no-avatar"></span> <div class="author-description"> <h4><span class="author-heading">Author:</span> admin</h4> <a class="author-link" href="http://skynetch.com" rel="author">http://skynetch.com</a> <p class="author-bio"></p> </div> </div> <nav class="navigation post-navigation" role="navigation"><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"><span class="nav-previous disabled"></span><a class="back-to-list" href="/agency/"><i class="dt-icon-the7-misc-006-1" aria-hidden="true"></i></a><span class="nav-next disabled"></span></div></nav><div class="single-related-posts"><h3>Related Posts</h3><section class="items-grid"><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/998/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/998/">Material Theming: Making Material Your Own!</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/1014/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/1014/">The Power of Serverless v2.0! (Now an Open-Source Gatsby Site Hosted on Netlify)</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/1030/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/1030/">A Better Approach for Using Purgecss with Tailwind</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/1046/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/1046/">A Conspiracy to Kill IE6</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/1062/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/1062/">Using Parcel as a Bundler for React Applications</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/1078/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/1078/">The Power of Named Transitions in Vue</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div></section></div> </article> </div><!-- #content --> <aside id="sidebar" class="sidebar"> <div class="sidebar-content widget-divider-off"> <section id="search-2" class="widget widget_search"> <form class="searchform" role="search" method="get" action="https://skynetch.com/"> <label for="the7-search" class="screen-reader-text">Search:</label> <input type="text" id="the7-search" class="field searchform-s" name="s" value="" placeholder="Type and hit enter …" /> <input type="submit" class="assistive-text searchsubmit" value="Go!" /> <a href="" class="submit"></a> </form> </section><section id="presscore-blog-posts-2" class="widget widget_presscore-blog-posts"><div class="widget-title">Recent posts</div><ul class="recent-posts round-images"><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2505-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2505-2/">Input Masking</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2498-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2498-2/">Web Animation Essentials: CSS Animations and Transitions</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2488-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2488-2/">Lazy-Loading Disqus Comments</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2483-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2483-2/">CSS Shorthand Syntax Considered an Anti-Pattern</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2482-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2482-2/">Google Analytics Can Show You Screen Resolution ? Browser Window</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2479-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2479-2/">Prefer `defer` Over `async`</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li></ul></section><section id="presscore-portfolio-2" class="widget widget_presscore-portfolio"><div class="widget-title">Recent projects</div></section> </div> </aside><!-- #sidebar --> </div><!-- .wf-container --> </div><!-- .wf-wrap --> </div><!-- #main --> <!-- !Footer --> <footer id="footer" class="footer solid-bg"> <div class="wf-wrap"> <div class="wf-container-footer"> <div class="wf-container"> <section id="presscore-custom-menu-one-3" class="widget widget_presscore-custom-menu-one wf-cell wf-1-3"><ul class="custom-menu enable-bold show-arrow"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-328 first"><a href="#!/up">Home</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-329"><a href="#!/about">About Us</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-410"><a href="#!/services">Services</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-331"><a href="#!/team">Team</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#!/contact">Contact</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-8497"><a href="https://skynetch.com/blog/">Blog</a></li></ul></section><section id="presscore-contact-info-widget-2" class="widget widget_presscore-contact-info-widget wf-cell wf-1-3"><div class="widget-title">Contact Info</div><ul class="contact-info"><li><span class="color-primary">Phone number:</span><br />001 234 56 78</li><li><span class="color-primary">Address:</span><br />SoHo 94 Broadway St New York, NY 1001</li><li><span class="color-primary">Mail:</span><br />hello@dream-theme.com</li><li><span class="color-primary">Business hours:</span><br />Mon. - Fri. 10:00 - 19:00</li></ul><div class="soc-ico"><p class="assistive-text">Find us on:</p><a title="Facebook page opens in new window" href="#" target="_blank" class="facebook"><span class="soc-font-icon"></span><span class="screen-reader-text">Facebook page opens in new window</span></a><a title="Twitter page opens in new window" href="#" target="_blank" class="twitter"><span class="soc-font-icon"></span><span class="screen-reader-text">Twitter page opens in new window</span></a><a title="Dribbble page opens in new window" href="#" target="_blank" class="dribbble"><span class="soc-font-icon"></span><span class="screen-reader-text">Dribbble page opens in new window</span></a><a title="YouTube page opens in new window" href="#" target="_blank" class="you-tube"><span class="soc-font-icon"></span><span class="screen-reader-text">YouTube page opens in new window</span></a></div></section><section id="presscore-contact-form-widget-2" class="widget widget_presscore-contact-form-widget wf-cell wf-1-3"><div class="widget-title">Any questions? Get in touch!</div><form class="dt-contact-form dt-form" method="post"><input type="hidden" name="widget_id" value="presscore-contact-form-widget-2" /><input type="hidden" name="send_message" value="" /><input type="hidden" name="security_token" value="34efe4c56db6a54785ba"/><div class="form-fields"><span class="form-name"><label class="assistive-text">Name *</label><input type="text" class="validate[required]" placeholder="Name *" name="name" value="" aria-required="true"> </span><span class="form-mail"><label class="assistive-text">E-mail *</label><input type="text" class="validate[required,custom[email]]" placeholder="E-mail *" name="email" value="" aria-required="true"> </span><span class="form-telephone"><label class="assistive-text">Telephone</label><input type="text" placeholder="Telephone" name="telephone" value="" aria-required="false"> </span></div><span class="form-message"><label class="assistive-text">Message</label><textarea placeholder="Message" name="message" rows="3" aria-required="false"></textarea> </span><p><a href="#" class="dt-btn dt-btn-m dt-btn-submit" rel="nofollow"><span>Submit</span></a><input class="assistive-text" type="submit" value="submit"></p></form> </section> </div><!-- .wf-container --> </div><!-- .wf-container-footer --> </div><!-- .wf-wrap --> <!-- !Bottom-bar --> <div id="bottom-bar" class="logo-left" role="contentinfo"> <div class="wf-wrap"> <div class="wf-container-bottom"> <div id="branding-bottom"><a class="" href="https://skynetch.com/"><img class=" preload-me" src="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png" srcset="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png 27w, https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_57x57.png 57w" width="27" height="27" sizes="27px" alt="Skynetch" /></a></div> <div class="wf-float-left"> © 2020 Skynetch Custom Software Company </div> <div class="wf-float-right"> <div class="bottom-text-block"><p><span class="paint-accent-color">mail:</span> support@skynetch.com<span class="paint-accent-color" style="padding-left: 20px">tel:</span> +52 55 4351 9960</p> </div> </div> </div><!-- .wf-container-bottom --> </div><!-- .wf-wrap --> </div><!-- #bottom-bar --> </footer><!-- #footer --> <a href="#" class="scroll-top"><span class="screen-reader-text">Go to Top</span></a> </div><!-- #page --> <script type="text/javascript" id="modal"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1653144004 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="info-bar"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1653144004 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="slidein"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1653144004 * 1000 ; var diffms = (now - gmt) ; </script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/main.min.js?ver=9.2.2' id='dt-main-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/plugins/go_pricing/assets/js/go_pricing_scripts.js?ver=3.3.17' id='go-pricing-scripts-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/plugins/dt-the7-core/assets/js/post-type.min.js?ver=2.5.3.1' id='the7-core-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-includes/js/wp-embed.min.js?ver=5.5.9' id='wp-embed-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/jquery.validationEngine.js?ver=9.2.2' id='the7-form-validator-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/languages/jquery.validationEngine-en.js?ver=9.2.2' id='the7-form-validator-translation-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/dt-contact-form.min.js?ver=9.2.2' id='the7-contact-form-js'></script> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)" aria-label="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share" aria-label="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen" aria-label="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out" aria-label="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)" aria-label="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)" aria-label="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </body> </html> <!-- Page generated by LiteSpeed Cache 3.6.4 on 2022-05-21 14:40:04 -->
