Høydevideo-karusell

Embedkode til forsiden:

<iframe src="https://www.dn.no/prosjekter/2024/12/video-front/?playlist=aJVoF73L" seamless="" style="width:100%;height:400px;margin:0;padding:0;border:none"></iframe>

Embedkode til artikkel Nyheter/Kommentar

<iframe id="red-widget__video" src="https://www.dn.no/prosjekter/2024/12/video-front/?type=article" seamless style="width:100%;margin:0;padding:0;border:none"></iframe>
<script>
  {
    const key = '__red-widget__';
    const id = 'red-widget__video';
    const payload = {};

    const observer = new IntersectionObserver((items) => {
      const node = document.querySelector(`#${id}`);
      for (let i = 0; i < items.length; i++) {
        node.contentWindow.postMessage(key + JSON.stringify({ type: 'intersect', data: { value: items[i].isIntersecting } }), '*');
      }
    });

    window.addEventListener('message', (event) => {
      const node = document.querySelector(`#${id}`);

      if (event.type === 'message' && typeof event.data === 'string' && event.data.indexOf(key) === 0 && event.source === node.contentWindow) {
        const { data, type } = JSON.parse(event.data.replace(key, ''));
        node.height = data.height + 'px';
        console.log('received: ' + type);

        if (type === 'mounted') {
          observer.observe(node);
        }

        if (type === 'request') {
          node.contentWindow.postMessage(key + JSON.stringify({ type: 'payload', data: payload }), '*');
        }
      }
    });
  }
</script>

Embedkode til artikkel feature - i brødtekstspalte

<div data-layout="body-width">
  <iframe id="red-widget__video" src="https://www.dn.no/prosjekter/2024/12/video-front/?type=article" seamless style="width:100%;margin:0;padding:0;border:none"></iframe>
<script>
  {
    const key = '__red-widget__';
    const id = 'red-widget__video';
    const payload = {};



    const observer = new IntersectionObserver((items) => {
      const node = document.querySelector(`#${id}`);
      for (let i = 0; i < items.length; i++) {
        node.contentWindow.postMessage(key + JSON.stringify({ type: 'intersect', data: { value: items[i].isIntersecting } }), '*');
      }
    });



    window.addEventListener('message', (event) => {
      const node = document.querySelector(`#${id}`);



      if (event.type === 'message' && typeof event.data === 'string' && event.data.indexOf(key) === 0 && event.source === node.contentWindow) {
        const { data, type } = JSON.parse(event.data.replace(key, ''));
        node.height = data.height + 'px';
        console.log('received: ' + type);



        if (type === 'mounted') {
          observer.observe(node);
        }



        if (type === 'request') {
          node.contentWindow.postMessage(key + JSON.stringify({ type: 'payload', data: payload }), '*');
        }
      }
    });
  }
</script>
</div>
<script>
(() => {
  const bodyWidthEmbeds = document.querySelectorAll('[data-layout="body-width"]');
  bodyWidthEmbeds.forEach(element => {
    const embed = element.closest('[id^="embed"]');
    embed.setAttribute('class', '');
    embed.classList.add('vrs-content-block', 'vrs-content-block__text');
    const inner = embed.querySelector('div');
    inner.classList = 'vrs-content-block__text-inner';
    inner.style = 'margin-block: 25px';
  });
})();
</script>

Embedkode til artikkel feature - begge spalter

<div data-layout="full-width">
  <iframe id="red-widget__video" src="https://www.dn.no/prosjekter/2024/12/video-front/?type=article" seamless style="width:100%;margin:0;padding:0;border:none"></iframe>
<script>
  {
    const key = '__red-widget__';
    const id = 'red-widget__video';
    const payload = {};



    const observer = new IntersectionObserver((items) => {
      const node = document.querySelector(`#${id}`);
      for (let i = 0; i < items.length; i++) {
        node.contentWindow.postMessage(key + JSON.stringify({ type: 'intersect', data: { value: items[i].isIntersecting } }), '*');
      }
    });



    window.addEventListener('message', (event) => {
      const node = document.querySelector(`#${id}`);



      if (event.type === 'message' && typeof event.data === 'string' && event.data.indexOf(key) === 0 && event.source === node.contentWindow) {
        const { data, type } = JSON.parse(event.data.replace(key, ''));
        node.height = data.height + 'px';
        console.log('received: ' + type);



        if (type === 'mounted') {
          observer.observe(node);
        }



        if (type === 'request') {
          node.contentWindow.postMessage(key + JSON.stringify({ type: 'payload', data: payload }), '*');
        }
      }
    });
  }
</script>
</div>
<script>
(() => {
  const fullWidthEmbeds = document.querySelectorAll('[data-layout="full-width"]');
  fullWidthEmbeds.forEach(element => {
    const embed = element.closest('[id^="embed"]');
    embed.setAttribute('class', '');
    embed.classList.add('vrs-content-block', 'vrs-content-block__text');
    embed.style = 'margin-block: 25px';
  });
})();
</script>