Last active
January 25, 2021 05:04
-
-
Save nettles-sync/c273fe5aa6f3aa67489cae109539f295 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <div class="container"> | |
| <div class="row vidrow" style="margin:0;"> | |
| <div class="col-md-6"> | |
| <h2>Title</h2> | |
| <big>Description</big> | |
| </div> | |
| <div class="col-md-6"> | |
| <!-- Example Youtube Video Url https://www.youtube.com/watch?v=dQw4w9WgXcQ --> | |
| <!-- Place the v= parameter in data-embed --> | |
| <div class="youtube" data-embed="dQw4w9WgXcQ"> | |
| <div class="play-button"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or 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
| (function() { | |
| var youtube = document.querySelectorAll(".youtube"); | |
| for (var i = 0; i < youtube.length; i++) { | |
| var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg"; | |
| var image = new Image(); | |
| image.src = source; | |
| image.addEventListener("load", function() { | |
| youtube[i].appendChild(image); | |
| }(i)); | |
| youtube[i].addEventListener("click", function() { | |
| var iframe = document.createElement("iframe"); | |
| iframe.setAttribute("frameborder", "0"); | |
| iframe.setAttribute("allowfullscreen", ""); | |
| iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1"); | |
| this.innerHTML = ""; | |
| this.appendChild(iframe); | |
| }); | |
| }; | |
| })(); |
This file contains hidden or 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
| .youtube { | |
| background-color: #000; | |
| margin-bottom: 30px; | |
| position: relative; | |
| padding-top: 56.25%; | |
| overflow: hidden; | |
| cursor: pointer | |
| } | |
| .youtube img { | |
| width: 100%; | |
| top: -16.84%; | |
| left: 0; | |
| opacity: .99 | |
| } | |
| .youtube .play-button { | |
| width: 90px; | |
| height: 60px; | |
| background-color: #333; | |
| box-shadow: 0 0 30px rgba(0, 0, 0, .6); | |
| z-index: 1; | |
| opacity: .9; | |
| border-radius: 6px | |
| } | |
| .youtube .play-button:before { | |
| content: ""; | |
| border-style: solid; | |
| border-width: 15px 0 15px 26px; | |
| border-color: transparent transparent transparent #fff | |
| } | |
| .youtube img, | |
| .youtube .play-button { | |
| cursor: pointer | |
| } | |
| .youtube img, | |
| .youtube iframe, | |
| .youtube .play-button, | |
| .youtube .play-button:before { | |
| position: absolute | |
| } | |
| .youtube .play-button, | |
| .youtube .play-button:before { | |
| top: 50%; | |
| left: 50%; | |
| transform: translate3d(-50%, -50%, 0) | |
| } | |
| .youtube iframe { | |
| height: 100%; | |
| width: 100%; | |
| top: 0; | |
| left: 0 | |
| } | |
| .vidrow { | |
| padding: 25px 0; | |
| } | |
| .vidrow big { | |
| margin-bottom: 25px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment