OffHealth component library

Video 

<div class="n7-video relative ">

    <!-- RP 240322 - Changed classes -->
    <div class="n7-video__overlay absolute z-10 w-full aspect-video max-h-[450px]">
        <!-- RP 240322 - Changed classes -->
        <img src="/images/hero-background.jpg" class="w-full aspect-video max-h-[450px] object-cover">

        <button type="" class="n7-btn 
    n7-btn--icon n7-video__play absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 n7-btn--outline-reverse cursor-pointer"><svg class="inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                <use xlink:href="../../icons.svg#mini--play" />
            </svg>

        </button>

    </div>

    <iframe class="n7-video__iframe w-full aspect-video max-h-[450px]" src="https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL&amp;controls=2&amp;modestbranding=1&amp;rel=0" title="YouTube video title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
 
<div class="n7-video relative {{ containerClasses }}">
  {% if overlayImage %}
  <!-- RP 240322 - Changed classes -->
  <div class="n7-video__overlay absolute z-10 w-full aspect-video max-h-[450px]">
    <!-- RP 240322 - Changed classes -->
    <img src="{{ overlayImage }}" class="w-full aspect-video max-h-[450px] object-cover">
    {% render '@button--icon-only', { classes:'n7-video__play absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 n7-btn--outline-reverse cursor-pointer', icon: 'mini--play'} %} 
  </div>
  {% endif %}
  <iframe class="n7-video__iframe {{ classes }}" src="{{ src }}{{ parameters }}" title="{{ title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
 
{
  "src": "https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL",
  "parameters": "&controls=2&modestbranding=1&rel=0",
  "overlayImage": "/images/hero-background.jpg",
  "title": "YouTube video title",
  "classes": "w-full aspect-video max-h-[450px]"
}
  • Content: 
    document.addEventListener('DOMContentLoaded', function () {
    'use strict';

    var videoContainer = document.querySelector('.n7-video');
// RP 240326 - Added container existing control
    if (videoContainer) {
        var playButton = videoContainer.querySelector('.n7-video__play');
        var videoOverlay = videoContainer.querySelector('.n7-video__overlay');
    }

    function viewVideo() {
        videoOverlay.style.display = "none"
    }

    if (videoContainer) {
        playButton.addEventListener('click', function (e) {
            e.preventDefault();
            viewVideo();
        });
    }
})
  • URL: /components/raw/video/video.js
  • Filesystem Path: components/02-atoms/video/video.js
  • Size: 616 Bytes

Use of Js script to handle layer over video (see Assets tab)