Last active
March 1, 2023 10:33
-
-
Save aligator28/e734282a6eb2a7493ebe695eb536ee23 to your computer and use it in GitHub Desktop.
Image instead of Video (ease page load)
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
| index.html | |
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <style> | |
| .page { | |
| margin: 0; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-gap: 20px; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="video.css"> | |
| </head> | |
| <body class="page"> | |
| <div class="video"> | |
| <a class="video__link" href="https://youtu.be/neHA4MJwpnY"> | |
| <picture> | |
| <source srcset="https://i.ytimg.com/vi_webp/YOUTUBE_VIDEO_ID/maxresdefault.webp" type="image/webp"> | |
| <img class="video__media" src="https://i.ytimg.com/vi/YOUTUBE_VIDEO_ID/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы"> | |
| </picture> | |
| </a> | |
| <button class="video__button" aria-label="Запустить видео"> | |
| <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg> | |
| </button> | |
| </div> | |
| <div class="video"> | |
| <a class="video__link" href="https://youtu.be/neHA4MJwpnY"> | |
| <picture> | |
| <source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp"> | |
| <img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы"> | |
| </picture> | |
| </a> | |
| <button class="video__button" aria-label="Запустить видео"> | |
| <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg> | |
| </button> | |
| </div> | |
| <div class="video"> | |
| <a class="video__link" href="https://youtu.be/neHA4MJwpnY"> | |
| <picture> | |
| <source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp"> | |
| <img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы"> | |
| </picture> | |
| </a> | |
| <button class="video__button" aria-label="Запустить видео"> | |
| <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg> | |
| </button> | |
| </div> | |
| <div class="video"> | |
| <a class="video__link" href="https://youtu.be/neHA4MJwpnY"> | |
| <picture> | |
| <source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp"> | |
| <img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы"> | |
| </picture> | |
| </a> | |
| <button class="video__button" aria-label="Запустить видео"> | |
| <svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg> | |
| </button> | |
| </div> | |
| <script src="video.js"></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
| .video { | |
| position: relative; | |
| width: 100%; | |
| height: 0; | |
| padding-bottom: 56.25%; | |
| background-color: #000000; | |
| } | |
| .video__link { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .video__media { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .video__button { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| z-index: 1; | |
| display: none; | |
| padding: 0; | |
| width: 68px; | |
| height: 48px; | |
| border: none; | |
| background-color: transparent; | |
| transform: translate(-50%, -50%); | |
| cursor: pointer; | |
| } | |
| .video__button-shape { | |
| fill: #212121; | |
| fill-opacity: 0.8; | |
| } | |
| .video__button-icon { | |
| fill: #ffffff; | |
| } | |
| .video__button:focus { | |
| outline: none; | |
| } | |
| .video:hover .video__button-shape, | |
| .video__button:focus .video__button-shape { | |
| fill: #ff0000; | |
| fill-opacity: 1; | |
| } | |
| /* Enabled */ | |
| .video--enabled { | |
| cursor: pointer; | |
| } | |
| .video--enabled .video__button { | |
| display: block; | |
| } |
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
| function findVideos() { | |
| let videos = document.querySelectorAll('.video'); | |
| for (let i = 0; i < videos.length; i++) { | |
| setupVideo(videos[i]); | |
| } | |
| } | |
| function setupVideo(video) { | |
| let link = video.querySelector('.video__link'); | |
| let media = video.querySelector('.video__media'); | |
| let button = video.querySelector('.video__button'); | |
| let id = parseMediaURL(media); | |
| video.addEventListener('click', () => { | |
| let iframe = createIframe(id); | |
| link.remove(); | |
| button.remove(); | |
| video.appendChild(iframe); | |
| }); | |
| link.removeAttribute('href'); | |
| video.classList.add('video--enabled'); | |
| } | |
| function parseMediaURL(media) { | |
| let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i; | |
| let url = media.src; | |
| let match = url.match(regexp); | |
| return match[1]; | |
| } | |
| function createIframe(id) { | |
| let iframe = document.createElement('iframe'); | |
| iframe.setAttribute('allowfullscreen', ''); | |
| iframe.setAttribute('allow', 'autoplay'); | |
| iframe.setAttribute('src', generateURL(id)); | |
| iframe.classList.add('video__media'); | |
| return iframe; | |
| } | |
| function generateURL(id) { | |
| let query = '?rel=0&showinfo=0&autoplay=1'; | |
| return 'https://www.youtube.com/embed/' + id + query; | |
| } | |
| findVideos(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment