blog-gutemberg-video

<?php

$classes = ['block-video-rgpd'];
if (!empty($block['className']))
    $classes = array_merge($classes, explode(' ', $block['className']));

$anchor = '';
if (!empty($block['anchor']))
    $anchor = ' id="' . sanitize_title($block['anchor']) . '"';


$img = get_field('video_img');
$url = get_field('video_url');

$classContainer = 'video-lightview';
if( !empty( $url)){
    if (strpos($url, 'youtube') > 0) {
        $classContainer .=  ' video-youtube';
    } elseif (strpos($url, 'vimeo') > 0) {
        $classContainer .= ' video-vimeo';
    } elseif (strpos($url, 'mp4') > 0  || strpos($url, 'mov') > 0 || strpos($url, 'webm') > 0) {
        $classContainer .= ' htmlvid';
    }
}
// Check rows exists.
?>
<div class="<?php echo join(' ', $classes); ?>" <?php echo $anchor; ?>>
    <div class="play-button"><svg viewbox="0 0 89 96" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M88.51 47.802L.744 95.433V.17L88.51 47.802z" fill="currentColor" />
        </svg>
    </div>
    <div class="<?php echo $classContainer; ?> video-container" data-src="<?php echo $url; ?>">
        <?php echo wp_get_attachment_image($img, 'video-rgpd'); ?>
    </div>
</div>

disable-video-tarte

	let video = document.querySelectorAll('.video-lightview');
		disableVideo = () => {
			let videoEl = event.target.parentElement;
			let url = videoEl.getAttribute('data-src');
			// console.log( 'youtube activé ? ' + tarteaucitron.launch.youtube );
			// console.log( 'vimeo activé ? ' + tarteaucitron.launch.vimeo );

			if( videoEl.classList.contains('video-youtube') == true && tarteaucitron.launch.youtube !== true){
				videoEl.classList.remove("video-youtube", "video-lightview");
				window.open(url, '_blank');
			}

			if( videoEl.classList.contains('video-vimeo') == true && tarteaucitron.launch.vimeo !== true){
				videoEl.classList.remove("video-vimeo", "video-lightview");
				window.open(url, '_blank');
			}
		};

		for (let i = 0; i < video.length; ++i) {
			var el = video[i];
			console.log( video );
			el.addEventListener('click', disableVideo);
		}

plugin-lightview

  if (document.querySelector('.video-lightview') !== null) {
    $(document).on("click", ".video-lightview", function (e) {
      e.preventDefault();
      var className = e.currentTarget.className;
      var videoId = e.currentTarget.getAttribute('data-src');

      if (~className.indexOf('htmlvid')) {
        BigPicture({
          el: e.currentTarget,
          vidSrc: e.currentTarget.getAttribute('src'),
        })
      } else if (~className.indexOf('vimeo')) {

        var regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
        var parseUrl = regExp.exec(videoId);
        videoId = parseUrl[5];
        BigPicture({
          el: e.currentTarget,
          vimeoSrc: videoId,
        })
      } else if (~className.indexOf('youtube')) {
        videoId = videoId.split('v=')[1];
        var ampersandPosition = videoId.indexOf('&');
        if (ampersandPosition !== -1) {
          videoId = videoId.substring(0, ampersandPosition);
        }

        BigPicture({
          el: e.currentTarget,
          ytSrc: videoId,
        })
      }
    });
  };