Last active
November 8, 2020 19:55
Star
You must be signed in to star a gist
I keep forgetting how I can do sleek YouTube embeds. Here is one from a project. Still tweaking.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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