From fb228f187531146b3aebde6f11e8f52689259442 Mon Sep 17 00:00:00 2001
From: Okan Sahin <39759830+mokimo@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:37:01 +0200
Subject: [PATCH] Revert "MWPW-156749: Fix video CLS " (#2899) (#2900)

Revert "MWPW-156749: Fix video CLS  (#2849)"

This reverts commit d4134c85979cfbb88a01d331f8d946eb67251de5.
---
 libs/blocks/adobetv/adobetv.js      | 34 +++++++++++----
 libs/blocks/figure/figure.js        | 36 ++++++++--------
 libs/blocks/video/video.js          | 43 +++++++++++++------
 libs/utils/decorate.js              | 29 +++----------
 test/blocks/adobetv/adobetv.test.js | 11 +++++
 test/blocks/adobetv/mocks/body.html |  2 +-
 test/blocks/figure/figure.test.js   |  5 +--
 test/blocks/figure/mocks/body.html  | 16 +++++++-
 test/blocks/marquee/marquee.test.js | 21 ++--------
 test/blocks/video/mocks/body.html   |  2 +-
 test/blocks/video/video.test.js     | 64 ++++++++++++++++-------------
 11 files changed, 150 insertions(+), 113 deletions(-)

diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
index 85928d1c03..31cfc7a368 100644
--- a/libs/blocks/adobetv/adobetv.js
+++ b/libs/blocks/adobetv/adobetv.js
@@ -1,15 +1,22 @@
-import { decorateAnchorVideo } from '../../utils/decorate.js';
+import { createIntersectionObserver } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
 
-export default function init(a) {
-  a.classList.add('hide-video');
+const ROOT_MARGIN = 1000;
+
+const loadAdobeTv = (a) => {
   const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
+    const { href, hash, dataset } = a;
+    const attrs = getVideoAttrs(hash || 'autoplay', dataset);
+    const video = `<video ${attrs}>
+          <source src="${href}" type="video/mp4" />
+        </video>`;
     if (!a.parentNode) return;
-    decorateAnchorVideo({
-      src: a.href,
-      anchorTag: a,
-    });
+    a.insertAdjacentHTML('afterend', video);
+    const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement;
+    applyHoverPlay(videoElem);
+    a.remove();
   } else {
     const embed = `<div class="milo-video">
       <iframe src="${a.href}" class="adobetv" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" allow="encrypted-media" title="Adobe Video Publishing Cloud Player" loading="lazy">
@@ -18,4 +25,17 @@ export default function init(a) {
     a.insertAdjacentHTML('afterend', embed);
     a.remove();
   }
+};
+
+export default function init(a) {
+  a.classList.add('hide-video');
+  if (a.textContent.includes('no-lazy')) {
+    loadAdobeTv(a);
+  } else {
+    createIntersectionObserver({
+      el: a,
+      options: { rootMargin: `${ROOT_MARGIN}px` },
+      callback: loadAdobeTv,
+    });
+  }
 }
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
index cd0d80cd88..8275b18e93 100644
--- a/libs/blocks/figure/figure.js
+++ b/libs/blocks/figure/figure.js
@@ -1,5 +1,4 @@
-import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
-import { createTag } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
 
 function buildCaption(pEl) {
   const figCaptionEl = document.createElement('figcaption');
@@ -16,22 +15,23 @@ function htmlToElement(html) {
 }
 
 function decorateVideo(clone, figEl) {
-  const videoTag = clone.querySelector('video');
-  const anchorTag = clone.querySelector('a[href*=".mp4"]');
-  if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
-  if (anchorTag) decorateAnchorVideo({ src: anchorTag.href, anchorTag });
-  if (videoTag) {
-    videoTag.removeAttribute('data-mouseevent');
-    if (videoTag.dataset?.videoSource) {
-      videoTag.appendChild(
-        createTag('source', {
-          src: videoTag.dataset?.videoSource,
-          type: 'video/mp4',
-        }),
-      );
-    }
-    applyHoverPlay(videoTag);
-    figEl.prepend(videoTag);
+  let video = clone.querySelector('video');
+  const videoLink = clone.querySelector('a[href*=".mp4"]');
+  if (videoLink) {
+    const { href, hash, dataset } = videoLink;
+    const attrs = getVideoAttrs(hash, dataset);
+    const videoElem = `<video ${attrs}>
+      <source src="${href}" type="video/mp4" />
+    </video>`;
+
+    videoLink.insertAdjacentHTML('afterend', videoElem);
+    videoLink.remove();
+    video = clone.querySelector('video');
+  }
+  if (video) {
+    video.removeAttribute('data-mouseevent');
+    applyHoverPlay(video);
+    figEl.prepend(video);
   }
 }
 
diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
index 3decc59e15..43deb1b19d 100644
--- a/libs/blocks/video/video.js
+++ b/libs/blocks/video/video.js
@@ -1,13 +1,10 @@
-import { getConfig } from '../../utils/utils.js';
-import { decorateAnchorVideo } from '../../utils/decorate.js';
+import { createIntersectionObserver, getConfig } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs, applyInViewPortPlay } from '../../utils/decorate.js';
 
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (!a.parentNode) {
-    a.remove();
-    return;
-  }
-  const { pathname } = a;
+const ROOT_MARGIN = 1000;
+
+const loadVideo = (a) => {
+  const { pathname, hash, dataset } = a;
   let videoPath = `.${pathname}`;
   if (pathname.match('media_.*.mp4')) {
     const { codeRoot } = getConfig();
@@ -17,8 +14,28 @@ export default function init(a) {
     const mediaFilename = pathname.split('/').pop();
     videoPath = `${root}${mediaFilename}`;
   }
-  decorateAnchorVideo({
-    src: videoPath,
-    anchorTag: a,
-  });
+
+  const attrs = getVideoAttrs(hash, dataset);
+  const video = `<video ${attrs}>
+        <source src="${videoPath}" type="video/mp4" />
+      </video>`;
+  if (!a.parentNode) return;
+  a.insertAdjacentHTML('afterend', video);
+  const videoElem = document.body.querySelector(`source[src="${videoPath}"]`)?.parentElement;
+  applyHoverPlay(videoElem);
+  applyInViewPortPlay(videoElem);
+  a.remove();
+};
+
+export default function init(a) {
+  a.classList.add('hide-video');
+  if (a.textContent.includes('no-lazy')) {
+    loadVideo(a);
+  } else {
+    createIntersectionObserver({
+      el: a,
+      options: { rootMargin: `${ROOT_MARGIN}px` },
+      callback: loadVideo,
+    });
+  }
 }
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
index 12be0a663f..556670c79f 100644
--- a/libs/utils/decorate.js
+++ b/libs/utils/decorate.js
@@ -1,4 +1,4 @@
-import { createTag, createIntersectionObserver } from './utils.js';
+import { createTag } from './utils.js';
 
 export function decorateButtons(el, size) {
   const buttons = el.querySelectorAll('em a, strong a, p > a strong');
@@ -113,6 +113,8 @@ export async function decorateBlockBg(block, node, { useHandleFocalpoint = false
     const allVP = [['mobile-only'], ['tablet-only'], ['desktop-only']];
     const viewports = childCount === 2 ? binaryVP : allVP;
     [...node.children].forEach((child, i) => {
+      const videoLink = child.querySelector('a[href*=".mp4"]');
+      if (videoLink && !videoLink.hash) videoLink.hash = 'autoplay';
       if (childCount > 1) child.classList.add(...viewports[i]);
       const pic = child.querySelector('picture');
       if (useHandleFocalpoint && pic
@@ -198,7 +200,7 @@ export function getImgSrc(pic) {
   return source?.srcset ? `poster='${source.srcset}'` : '';
 }
 
-function getVideoAttrs(hash, dataset) {
+export function getVideoAttrs(hash, dataset) {
   const isAutoplay = hash?.includes('autoplay');
   const isAutoplayOnce = hash?.includes('autoplay1');
   const playOnHover = hash?.includes('hoverplay');
@@ -256,7 +258,7 @@ export function handleObjectFit(bgRow) {
   });
 }
 
-function getVideoIntersectionObserver() {
+export function getVideoIntersectionObserver() {
   if (!window?.videoIntersectionObs) {
     window.videoIntersectionObs = new window.IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -277,7 +279,7 @@ function getVideoIntersectionObserver() {
   return window.videoIntersectionObs;
 }
 
-function applyInViewPortPlay(video) {
+export function applyInViewPortPlay(video) {
   if (!video) return;
   if (video.hasAttribute('data-play-viewport')) {
     const observer = getVideoIntersectionObserver();
@@ -307,22 +309,3 @@ export function decorateMultiViewport(el) {
   }
   return foreground;
 }
-
-export function decorateAnchorVideo({ src, anchorTag }) {
-  if (!src.length || !(anchorTag instanceof HTMLElement)) return;
-  if (anchorTag.closest('.marquee, .aside, .hero-marquee') && !anchorTag.hash) anchorTag.hash = '#autoplay';
-  const { dataset, parentElement } = anchorTag;
-  const video = `<video ${getVideoAttrs(anchorTag.hash, dataset)} data-video-source=${src}></video>`;
-  anchorTag.insertAdjacentHTML('afterend', video);
-  const videoEl = parentElement.querySelector('video');
-  createIntersectionObserver({
-    el: parentElement,
-    options: { rootMargin: '1000px' },
-    callback: () => {
-      videoEl?.appendChild(createTag('source', { src, type: 'video/mp4' }));
-    },
-  });
-  applyHoverPlay(videoEl);
-  applyInViewPortPlay(videoEl);
-  anchorTag.remove();
-}
diff --git a/test/blocks/adobetv/adobetv.test.js b/test/blocks/adobetv/adobetv.test.js
index a54528e496..c7678e427e 100644
--- a/test/blocks/adobetv/adobetv.test.js
+++ b/test/blocks/adobetv/adobetv.test.js
@@ -6,6 +6,17 @@ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/adobetv/adobetv.js');
 
 describe('adobetv autoblock', () => {
+  it('decorates no-lazy video', async () => {
+    const block = document.querySelector('.video.no-lazy');
+    const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
+    block.append(a);
+
+    init(a);
+    const video = await waitForElement('.video.no-lazy iframe');
+    expect(video).to.exist;
+  });
+
   it('creates video block', async () => {
     const wrapper = document.body.querySelector('.adobe-tv');
     const a = wrapper.querySelector(':scope > a');
diff --git a/test/blocks/adobetv/mocks/body.html b/test/blocks/adobetv/mocks/body.html
index b633aecd5c..2110a02b0a 100644
--- a/test/blocks/adobetv/mocks/body.html
+++ b/test/blocks/adobetv/mocks/body.html
@@ -1,5 +1,5 @@
 <main>
-  <div class="video">
+  <div class="video no-lazy">
     <a href="https://video.tv.adobe.com/v/3410934t1">
       https://video.tv.adobe.com/v/3410934t1
     </a>
diff --git a/test/blocks/figure/figure.test.js b/test/blocks/figure/figure.test.js
index 61ee37b909..fb6d9b23fc 100644
--- a/test/blocks/figure/figure.test.js
+++ b/test/blocks/figure/figure.test.js
@@ -42,9 +42,8 @@ describe('init', () => {
     init(blockEl);
 
     const figures = blockEl.querySelectorAll('.figure');
-    expect(figures[0].querySelector('a > picture')).to.exist;
-    expect(figures[1].querySelector('a > video')).to.exist;
-    expect(figures[1].querySelector('a > video > source')).to.exist;
+    expect(figures[0].querySelector('a > picture')).to.be.exist;
+    expect(figures[1].querySelector('a > video')).to.be.exist;
   });
 
   it('should not add any classes to the block element when no pictures are present', () => {
diff --git a/test/blocks/figure/mocks/body.html b/test/blocks/figure/mocks/body.html
index 5a07ebf098..b79ea96e1f 100644
--- a/test/blocks/figure/mocks/body.html
+++ b/test/blocks/figure/mocks/body.html
@@ -51,7 +51,17 @@
         <div>
           <p>
             <video>
-
+              <source type="image/webp"
+                srcset=""
+                media="(min-width: 400px)">
+              <source type="image/webp"
+                srcset="">
+              <source type="image/jpeg"
+                srcset=""
+                media="(min-width: 400px)">
+              <img loading="lazy" alt="" type="image/jpeg"
+                src=""
+                width="2000" height="876">
             </video>
           </p>
           <p><em>caption</em></p>
@@ -104,7 +114,9 @@
       <div>
         <div>
           <p>
-            <video width="320" height="240" controls data-video-source="movie.mp4">
+            <video width="320" height="240" controls>
+              <source src="movie.mp4" type="video/mp4">
+              <source src="movie.ogg" type="video/ogg">
             </video>
           </p>
           <p><a href="https://blog.adobe.com/en/publish/2022/12/07/kah-milah-ledgester-breathes-life-into-award-winning-art-with-adobe-creative-cloud">https://blog.adobe.com/en/publish/2022/12/07/kah-milah-ledgester-breathes-life-into-award-winning-art-with-adobe-creative-cloud</a></p>
diff --git a/test/blocks/marquee/marquee.test.js b/test/blocks/marquee/marquee.test.js
index 0ab42a2cdd..5874bd6bd5 100644
--- a/test/blocks/marquee/marquee.test.js
+++ b/test/blocks/marquee/marquee.test.js
@@ -1,8 +1,8 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { waitFor, waitForElement } from '../../helpers/waitfor.js';
-import { setConfig, loadStyle } from '../../../libs/utils/utils.js';
+import { waitForElement } from '../../helpers/waitfor.js';
+import { setConfig } from '../../../libs/utils/utils.js';
 import { loadMnemonicList } from '../../../libs/blocks/marquee/marquee.js';
 
 const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
@@ -16,15 +16,6 @@ const video = await readFile({ path: './mocks/video.html' });
 const multipleIcons = await readFile({ path: './mocks/multiple-icons.html' });
 
 describe('marquee', () => {
-  before(async () => {
-    await new Promise((resolve) => {
-      loadStyle('../../../../libs/styles/styles.css', resolve);
-    });
-    await new Promise((resolve) => {
-      loadStyle('../../../../libs/blocks/marquee/marquee.css', resolve);
-    });
-  });
-
   const marquees = document.querySelectorAll('.marquee');
   marquees.forEach((marquee) => {
     init(marquee);
@@ -78,9 +69,7 @@ describe('marquee', () => {
       init(marquee);
       videoBLock(document.querySelector('#single-background a[href*=".mp4"]'));
       const videoEl = await waitForElement('#single-background .background video');
-      const intersectionObserverAddsSource = () => videoEl.querySelector('source');
-      await waitFor(intersectionObserverAddsSource);
-      expect(videoEl.querySelector('source')).to.exist;
+      expect(videoEl).to.exist;
       document.getElementById('single-background').remove();
     });
 
@@ -89,9 +78,7 @@ describe('marquee', () => {
       init(marquee);
       document.querySelectorAll('#multiple-background a[href*=".mp4"]').forEach((videoLink) => videoBLock(videoLink));
       await waitForElement('#multiple-background .background video');
-      const intersectionObserverAddsSource = () => document.querySelector('.background video source');
-      await waitFor(intersectionObserverAddsSource);
-      expect(marquee.querySelectorAll('.background video source').length).to.equal(1);
+      expect(marquee.querySelectorAll('.background video').length).to.equal(1);
       document.getElementById('multiple-background').remove();
     });
 
diff --git a/test/blocks/video/mocks/body.html b/test/blocks/video/mocks/body.html
index b3f1963c85..bafb0a0338 100644
--- a/test/blocks/video/mocks/body.html
+++ b/test/blocks/video/mocks/body.html
@@ -4,7 +4,7 @@
   }
 </style>
 <main>
-  <div class="video">
+  <div class="video no-lazy">
     <a href="https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4">
       https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4
     </a>
diff --git a/test/blocks/video/video.test.js b/test/blocks/video/video.test.js
index 3a4ac9b1e9..e80298c650 100644
--- a/test/blocks/video/video.test.js
+++ b/test/blocks/video/video.test.js
@@ -1,26 +1,25 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect, assert } from '@esm-bundle/chai';
+
 import sinon from 'sinon';
-import { waitFor, waitForElement } from '../../helpers/waitfor.js';
 
-import { setConfig, createTag } from '../../../libs/utils/utils.js';
+import { waitForElement } from '../../helpers/waitfor.js';
+import { setConfig } from '../../../libs/utils/utils.js';
 
 setConfig({});
 const { default: init } = await import('../../../libs/blocks/video/video.js');
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 
 describe('video uploaded using franklin bot', () => {
-  beforeEach(async () => {
-    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
+  it('decorates no-lazy video', async () => {
+    const block = document.querySelector('.video.no-lazy');
+    const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
+    block.append(a);
 
-  it('decorates video', (done) => {
-    const anchor = createTag('a');
-    anchor.remove = () => done();
-    init(anchor);
+    init(a);
+    const video = await waitForElement('.video.no-lazy video');
+    expect(video).to.exist;
   });
 
   it('decorates video', async () => {
@@ -75,6 +74,7 @@ describe('video uploaded using franklin bot', () => {
   it('no hoverplay attribute added when with autoplay on loop', async () => {
     const block = document.querySelector('.video.autoplay.playonhover');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -86,6 +86,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with hoverplay when only hoverplay is added to url', async () => {
     const block = document.querySelector('.video.hoveronly');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -96,6 +97,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with viewportplay only with autoplay', async () => {
     const block = document.querySelector('.video.autoplay.viewportplay');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -106,6 +108,7 @@ describe('video uploaded using franklin bot', () => {
   it('play video when element reached 80% viewport', async () => {
     const block = document.querySelector('.video.autoplay.viewportplay.scrolled-80');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
     const nextFrame = () => new Promise((resolve) => {
       requestAnimationFrame(resolve);
@@ -113,10 +116,13 @@ describe('video uploaded using franklin bot', () => {
 
     init(a);
     const video = block.querySelector('video');
+    const source = video.querySelector('source');
+    source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
+    source.setAttribute('type', 'video/mp4');
+
     const playSpy = sinon.spy(video, 'play');
     const pauseSpy = sinon.spy(video, 'pause');
-    const intersectionObserverAddsSource = () => video.querySelector('source');
-    await waitFor(intersectionObserverAddsSource);
+
     video.scrollIntoView();
     await nextFrame();
     await new Promise((resolve) => {
@@ -124,22 +130,20 @@ describe('video uploaded using franklin bot', () => {
     });
     assert.isTrue(playSpy.calledOnce);
 
-    // push the video out of the viewport
-    const div = document.createElement('div');
-    div.style.height = '2000px';
-    video.parentNode.insertBefore(div, video);
-
+    document.body.scrollIntoView();
     await nextFrame();
     await new Promise((resolve) => {
       setTimeout(resolve, 100);
     });
     assert.isTrue(pauseSpy.calledOnce);
+
     expect(video.hasAttribute('data-play-viewport')).to.be.true;
   });
 
   it('Don\'t play the video once it end when autoplay1 enabled', async () => {
     const block = document.querySelector('.video.autoplay1.viewportplay.ended');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
     const nextFrame = () => new Promise((resolve) => {
       requestAnimationFrame(resolve);
@@ -147,13 +151,15 @@ describe('video uploaded using franklin bot', () => {
 
     init(a);
     const video = block.querySelector('video');
+    const source = video.querySelector('source');
+    source.setAttribute('src', 'https://www.adobe.com/creativecloud/media_1167374e3354ef57f126fa78a55cbc1708ac4babd.mp4');
+    source.setAttribute('type', 'video/mp4');
+
     const playSpy = sinon.spy(video, 'play');
     const pauseSpy = sinon.spy(video, 'pause');
     const endedSpy = sinon.spy();
-    const intersectionObserverAddsSource = () => video.querySelector('source');
-    await waitFor(intersectionObserverAddsSource);
-
     video.addEventListener('ended', endedSpy);
+
     video.scrollIntoView();
     await nextFrame();
     await new Promise((resolve) => {
@@ -161,16 +167,13 @@ describe('video uploaded using franklin bot', () => {
     });
     assert.isTrue(playSpy.calledOnce);
 
-    // push the video out of the viewport
-    const div = document.createElement('div');
-    div.style.height = '2000px';
-    video.parentNode.insertBefore(div, video);
-
+    document.body.scrollIntoView();
     await nextFrame();
     await new Promise((resolve) => {
       setTimeout(resolve, 100);
     });
     assert.isTrue(pauseSpy.calledOnce);
+
     video.dispatchEvent(new Event('ended'));
     await nextFrame();
     await new Promise((resolve) => {
@@ -190,6 +193,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with viewportplay only with autoplay1', async () => {
     const block = document.querySelector('.video.autoplay1.viewportplay');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -200,6 +204,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay with autoplay1 hoverplay', async () => {
     const block = document.querySelector('.video.autoplay1.hoverplay.no-viewportplay');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -210,6 +215,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay with hoverplay', async () => {
     const block = document.querySelector('.video.hoverplay.no-viewportplay');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -220,6 +226,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay no autoplay', async () => {
     const block = document.querySelector('.video.no-autoplay.no-viewportplay');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);
@@ -230,6 +237,7 @@ describe('video uploaded using franklin bot', () => {
   it('decorate video with no viewportplay no autoplay1', async () => {
     const block = document.querySelector('.video.no-autoplay1.no-viewportplay');
     const a = block.querySelector('a');
+    a.textContent = 'no-lazy';
     block.append(a);
 
     init(a);