Skip to content

Instantly share code, notes, and snippets.

@noahlearner
Created February 17, 2021 14:35
Show Gist options
  • Save noahlearner/5317d6644c2603e0788f77a8b1d4cee3 to your computer and use it in GitHub Desktop.
Save noahlearner/5317d6644c2603e0788f77a8b1d4cee3 to your computer and use it in GitHub Desktop.
<!--
Go to your YouTube video.
Click Share
Copy The link: https://youtu.be/rW_Zjdnzc1k
Grab the id from Video. In the example above, it would be rW_Zjdnzc1k
replace the xxx in the code below with the id from the previous step
paste the code on Page.
Boatdrinks for all!!!
-->
<div class="video-responsive"><iframe
src="https://www.youtube.com/embed/xxx"
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/xxx?autoplay=1'><img defer='true' async='true' loading='lazy' src='https://img.youtube.com/vi/xxx/hqdefault.jpg' alt='Video Name Here'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="Video Title"
></iframe>
</div>
<style>
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment