Last active
May 20, 2019 22:57
-
-
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.
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
| <!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> |
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
| /* 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); | |
| }; | |
| } | |
| } | |
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
| /* 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