Skip to content

Instantly share code, notes, and snippets.

@laradevitt
Last active May 20, 2019 22:57
Show Gist options
  • Save laradevitt/dc33da840375592be01fd8e83e3dca0c to your computer and use it in GitHub Desktop.
Save laradevitt/dc33da840375592be01fd8e83e3dca0c to your computer and use it in GitHub Desktop.
An adaptation of "Light YouTube Embeds by @labnol". Also embeds Vimeo; didn't need to build thumbnail url. Vanilla JS.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<!-- YouTube -->
<article>
<div class="light-video-embed" data-id="Be_4mzNVmQ4">
<img src="https://i.ytimg.com/vi/Be_4mzNVmQ4/hqdefault.jpg" /><div class="play"></div>
</div>
</article>
<!-- Vimeo -->
<article>
<div class="light-video-embed" data-id="76604618">
<img src="http://i.vimeocdn.com/video/451477901_960.jpg" /><div class="play"></div>
</div>
</article>
<script>
document.addEventListener('DOMContentLoaded', function() {
lightEmbedInit();
});
</script>
</body>
</html>
/* Adapted from
Light YouTube Embeds by @labnol
http://labnol.org/?p=27941 */
function lightEmbedInit() {
var div, n,
v = document.getElementsByClassName('light-video-embed');
for (n = 0; n < v.length; n++) {
v[n].onclick = function() {
var id = this.dataset.id;
var img_src = new URL(this.children[0].attributes[0].value);
var hostname = img_src.hostname;
var iframe = document.createElement('iframe');
if (hostname == 'i.ytimg.com') {
var embed = 'https://www.youtube.com/embed/ID?autoplay=1';
}
else if (hostname == 'i.vimeocdn.com') {
var embed = '//player.vimeo.com/video/ID?autoplay=1';
}
iframe.setAttribute('src', embed.replace('ID', id));
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
this.parentNode.replaceChild(iframe, this);
};
}
}
/* Adapted from
Light YouTube Embeds by @labnol
http://labnol.org/?p=27941 */
.light-video-embed {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.light-video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.light-video-embed img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}
.light-video-embed img:hover {
-webkit-filter: brightness(75%);
}
.light-video-embed .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment