Skip to content

JOrg YouTube Iframe

Wilco Alsemgeest edited this page Jun 15, 2021 · 3 revisions

On the joomla.org website we run iframe with a stand still image, to have higher loading speeds. At the same time people can click the displayed video to fully load it.

Example J4 Release video

{sourcerer}<iframe loading="lazy" width="560" height="315" 
src="https://www.youtube-nocookie.com/embed/HCXJWDHncfk?rel=0&amp;controls=0&amp;
showinfo=0" srcdoc='<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}
img,span{position:absolute;width:100%;top:0;bottom:0;
margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style>
<a href="https://www.youtube-nocookie.com/embed/HCXJWDHncfk?rel=0&amp;controls=0&amp;showinfo=0">
<img src="https://img.youtube.com/vi/HCXJWDHncfk/hqdefault.jpg" width="480" height="360" class="embed-overlay" 
alt="Joomla! 4 Release Candidate"><span>&#x25BA;</span></a>' 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen="allowfullscreen" title="Joomla! 4 Release Candidate"></iframe>{/sourcerer}
Clone this wiki locally