Merge pull request #630 from hlxsites/629-products-vidyard-video

Product Family Page Play Vidyard Video

blocks/embed/embed.js

@@ -72,6 +72,19 @@ const embedVimeo = (block, url, autoplay) => {
   return embedHTML;
 };
 
+// To play vidyard videos
+const embedVidyard = (block, url, autoplay) => {
+  const video = url.pathname.split('/').pop();
+  const suffix = autoplay ? '?muted=1&autoplay=1' : '';
+  const embedHTML = `<div style="flex justify-center left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+      <iframe src="https://play.vidyard.com/${video}${suffix}" 
+      style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
+      frameborder="0" allowtransparency="true" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen  
+      title="video" loading="lazy"></iframe>
+    </div>`;
+  return embedHTML;
+};
+
 const loadEmbed = (block, link, autoplay) => {
   if (block.classList.contains('embed-is-loaded')) {
     return;
@@ -86,6 +99,10 @@ const loadEmbed = (block, link, autoplay) => {
       match: ['vimeo'],
       embed: embedVimeo,
     },
+    {
+      match: ['vidyard'],
+      embed: embedVidyard,
+    },
     {
       match: ['/content/dam/danaher/', '.pdf'],
       embed: embedPdfViewer,

scripts/scripts.js

@@ -217,7 +217,7 @@ export function setCookie(cname, cvalue, expTime = 30 * 1000 * 60 * 60 * 24, pat
  * @param {Element} main The container element
  */
 function buildVideo(main) {
-  main.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"]').forEach((link) => {
+  main.querySelectorAll('a[href*="youtube.com"],a[href*="vimeo.com"],a[href*="vidyard.com"]').forEach((link) => {
     if (link.closest('.embed, .hero') == null) {
       decorateEmbed(link.parentNode);
     }