Video

<div class="module module--video youtube module--video--width--full">
  <div class="inner">
    <div class="video-wrap">
      <video id="my-player-6a51d33b6a656" class="video-js" controls preload="auto"  poster="https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/video-preview-1024x577.png" >
                  <source src="https://www.youtube.com/watch?v=_JOm_ELpBvY" type="video/youtube" />
                <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a
          web browser that
          <a href="http://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
          </a>
        </p>
      </video>

    </div>
  </div>
</div>

import videojs from 'video.js';
/* eslint-disable-next-line */
import videojsYoutube from 'videojs-youtube';

(function () {
  function init() {
    videojs.getComponent('ControlBar').prototype.options_ = {
      loadEvent: 'play',
      children: [
        'playToggle',
        'timeDivider',
        'durationDisplay',
        'progressControl',
        'remainingTimeDisplay',
        'volumePanel',
        'fullscreenToggle'
      ]
    };

    const modules = document.querySelectorAll('.module--video:not(.initiated)');

    modules.forEach(module => {
      module.querySelectorAll('.video-js').forEach(video => {
        videojs(video, {
          techOrder: [
            'html5',
            'youtube'
          ],
          controlBar: {
            volumePanel: {
              inline: false,
              vertical: true
            }
          }
        })
      });

      module.classList.add('initiated');
    });
  }

  document.addEventListener("DOMContentLoaded", init);
})();