Last active
November 8, 2020 19:55
-
-
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.
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