Skip to content

Instantly share code, notes, and snippets.

@Zegnat
Last active November 8, 2020 19:55
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Zegnat/78d415d77f41ce330ec59ccbf6d1f1c8 to your computer and use it in GitHub Desktop.
I keep forgetting how I can do sleek YouTube embeds. Here is one from a project. Still tweaking.
<!--
Embedded Youtube player that combines:
* https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/
* https://css-tricks.com/lazy-load-embedded-youtube-videos/
* https://stackoverflow.com/a/42555610/3225372
* https://web.dev/iframe-lazy-loading/
* https://github.com/paulirish/lite-youtube-embed/blob/a927d63781883088c185cb69a0baade52732ab3e/src/lite-yt-embed.js#L28
Other things I am still thinking of adding:
* https://www.maxlaumeister.com/articles/hide-related-videos-in-youtube-embeds/
-->
<div style="position:relative;padding-top:56.25%;">
<iframe
loading="lazy"
title="Rick Astley - Never Gonna Give You Up (Video)"
src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0"
frameborder="0"
style="position:absolute;top:0;left:0;width:100%;height:100%"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
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/dQw4w9WgXcQ?rel=0&autoplay=1>
<img src=https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg alt='Rick Astley - Never Gonna Give You Up (Video)'>
<span>▶</span>
</a>"
></iframe>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment