Last active
May 12, 2025 19:41
-
-
Save jramsahai/0bc86314c55654d245b2f777979c2209 to your computer and use it in GitHub Desktop.
Dynamically load the Vidyard player behind a click of the thumbnail image using the v4 embed code. See description in comments.
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
| <!-- *****IMPORTANT NOTE***** This code is still in testing to ensure compatibility with MAP integrations. --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vidyard Player ‑ Lazy‑load responsive player</title> | |
| <style> | |
| /* ———————————————————————————— | |
| 1. Wrapper to keep the player and thumbnail sizes in sync | |
| */ | |
| .vidyard-wrapper { | |
| width: 100%; | |
| max-width: 960px; /* optional desktop cap */ | |
| margin: 3rem auto; /* centres the block; trim as you like */ | |
| aspect-ratio: 16 / 9; /* keeps a constant 16:9 box in modern CSS */ | |
| position: relative; | |
| background: #000; /* avoids flash of white before player loads*/ | |
| } | |
| /* ———————————————————————————— | |
| 2. Thumbnail img attributes to be later filled by the player iframe | |
| */ | |
| .vidyard-wrapper img, | |
| .vidyard-wrapper iframe { | |
| position: absolute; | |
| inset: 0; /* shorthand for top/right/bottom/left: 0 */ | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; /* ensures the thumbnail scales nicely */ | |
| } | |
| .vidyard-wrapper img { cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Constant‑size container --> | |
| <div class="vidyard-wrapper"> | |
| <!-- Load thumbnail only (no JS yet). Autoplay=2 to start the video automatically as long as the browser won't mute the player --> | |
| <img | |
| id="vidyard-thumb" | |
| class="vidyard-player-embed" | |
| src="https://play.vidyard.com/ePGB4bQuESTP8sDPwpHng7.jpg?play_button=1" | |
| alt="Play video" | |
| data-uuid="ePGB4bQuESTP8sDPwpHng7" | |
| data-v="4" | |
| data-type="inline" | |
| data-autoplay="2" | |
| /> | |
| </div> | |
| <!-- Inject Vidyard player iframe on click --> | |
| <script> | |
| (function () { | |
| const thumb = document.getElementById("vidyard-thumb"); | |
| const playerSrc = "https://play.vidyard.com/embed/v4.js"; | |
| let scriptAdded = false; | |
| function loadPlayer() { | |
| console.log("Thumbnail clicked!"); | |
| if (scriptAdded) return; // safeguard against double clicks | |
| scriptAdded = true; | |
| thumb.removeEventListener("click", loadPlayer); | |
| const s = document.createElement("script"); | |
| s.src = playerSrc; | |
| s.async = true; | |
| document.body.appendChild(s); | |
| console.log("JS Appended!"); | |
| /* Vidyard’s JS will replace the <img> with the player iframe, | |
| which inherits the wrapper’s dimensions. */ | |
| } | |
| thumb.addEventListener("click", loadPlayer); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Back in the v3 embed code days, it used to be a common recommendation to dynamically load the player behind a thumbnail click in scenarios where we were embedding many players on a page at once. It was necessary to avoid loading the same JS multiple times during the page load which impacted page performance. Since the v4 embed code, this practice hasn't been necessary because the v4 code only requires one execution to find all of the players on the page and populate their iframes. The set up of the MAP integrations still occurs on JS execution, which we may want to reduce/eliminate in cases where there is sufficiently high traffic. This code should prevent that setup until the thumbnail has been clicked, at which point it will load the JS, and surface the player iframe.