Skip to content

Instantly share code, notes, and snippets.

@chuckreynolds

chuckreynolds/lazy-load-youtube-embed.html

Created August 21, 2019 22:25
Show Gist options
  • Save chuckreynolds/025905b83e7f01aadfa2916b4e91793f to your computer and use it in GitHub Desktop.
Save chuckreynolds/025905b83e7f01aadfa2916b4e91793f to your computer and use it in GitHub Desktop.
Download ZIP
Stripped down Lazy Load Youtube embed - https://dev.to/haggen/lazy-load-embedded-youtube-videos-520g
Raw
lazy-load-youtube-embed.html
<!DOCTYPE html>
<html>
<head>
<title>Lazy load youtube embed</title>
<meta charset="UTF-8" />
</head>
<body>
<main>
<h1>Example of a lazy loaded embedded YouTube video</h1>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
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.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment