Created
June 4, 2020 11:28
-
-
Save JTBrinkmann/8e4c1b2e88b7aea43497e457bff15969 to your computer and use it in GitHub Desktop.
small web-tool to create embed code for lazy loaded youtube embeds
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> | |
| <body style="font-family: sans-serif"> | |
| <form> | |
| <label> | |
| Video-URL or ID: | |
| <input id="videourl" value="3q_iqrvnC_4" style="width: 40em" /> | |
| </label> | |
| <p id="warning" style="visibility: hidden; background: yellow; font-weight: bold;"> | |
| Warning: the extracted video id seems unusual | |
| </p> | |
| <p> | |
| parsed Video-ID: <input id="videoid" disabled /> | |
| </p> | |
| <br> | |
| HTML-Code zum Einbetten:<br> | |
| <textarea id="output" style="width: 100%; height: 10em"></textarea> | |
| <br> | |
| <p id="showcase"> | |
| </p> | |
| </form> | |
| <script> | |
| const parseVideoUrl = () => { | |
| const vidRx = '([0-9A-Za-z_-]{10}[048AEIMQUYcgkosw])' // https://webapps.stackexchange.com/a/101153 | |
| const vidRxExtractor = new RegExp(`^${vidRx}$|/(?:vi|v|embed|youtu\.be)/${vidRx}[/\\?]|[\\?&](?:v|vi)=${vidRx}`) | |
| const vidMatches = vidRxExtractor.exec(videourl.value) | |
| if (!vidMatches.length) { | |
| videoid.value = "not found" | |
| output.textContent = '' | |
| } else { | |
| const vid = vidMatches.filter(m => !!m)[1] | |
| videoid.value = vid | |
| warning.style.visibility = (vid.length != 11) ? 'visible' : 'hidden' | |
| const innerHTML = `<a href="https://www.youtube-nocookie.com/embed/${vid}?autoplay=1&modestbranding=1&showinfo=0&rel=0" | |
| style="height:100%;display:block;background:center/contain no-repeat #000 url(https://i.ytimg.com/vi/${vid}/0.jpg)"> | |
| <svg version="1.1" viewBox="0 0 68 48" | |
| style="position:absolute;left:50%;top:50%;width:68px;height:48px;margin-left:-34px;margin-top:-24px"> | |
| <path class="ytp-large-play-button-bg" | |
| 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" | |
| fill="#212121" fill-opacity="0.8"></path> | |
| <path d="M 45,24 27,14 27,34" fill="#fff"></path> | |
| </svg> | |
| <style scoped> | |
| a:hover .ytp-large-play-button-bg { | |
| transition: fill .1s, fill-opacity .1s; | |
| fill: #f00; | |
| fill-opacity: 1; | |
| } | |
| </style> | |
| </a>` | |
| const dataurl = "data:text/html," + encodeURIComponent(innerHTML.replace(/\s*\n\s*/g, '')) | |
| const html = `<iframe src="${dataurl}" width="560" height="315" frameborder="0"></iframe>` | |
| output.value = showcase.innerHTML = html | |
| } | |
| } | |
| videourl.addEventListener('change', parseVideoUrl) | |
| parseVideoUrl() | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment