Video Block: Access to Video ID?

The CMS Questions
1

The Video Block creates an Embed-Link from all kinds of Youtube or Vimeo Links. So it separates the Video-ID somewhere. Is it possible to access this video ID to have more flexibility in how the iframe is used?

I found this interesting approach to lazy-load Youtube-Embeds which I would like to try out. Therefore i should get access to the Video-ID and possibly the Video-Title.

2
3

Thank you for the links. I already tried to find the solution there but maybe I should be more clear in my question.

<figure data-orientation="landscape" style="width: 100%; position: relative; padding-bottom: 56.15%; height: 0; overflow: hidden;">
  <iframe 
    style="position: absolute; top: 0; left:0; width: 100%; height: 100%; border: 0;"
    loading="lazy";
    srcdoc="<style>
      * {
      padding: 0;
      margin: 0;
      overflow: hidden;
      }
      
      body, html {
        height: 100%;
      }
      
      img, svg {
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      
      svg {
        filter: drop-shadow(1px 1px 10px hsl(206.5, 70.7%, 8%));
        transition: all 250ms ease-in-out;
      }
      
      body:hover svg {
        filter: drop-shadow(1px 1px 10px hsl(206.5, 0%, 10%));
        transform: scale(1.2);
      }
    </style>
    <a href='<?= $block->url() ?>?autoplay=1&mute=1'>
      <img src='https://img.youtube.com/vi/GOW1oxrwUz0/hqdefault.jpg' alt='Coffee Recipe Javascript Project'>
      <svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='#ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play-circle'><circle cx='12' cy='12' r='10'></circle><polygon points='10 8 16 12 10 16 10 8'></polygon></svg>
    </a>
    "
    src="https://www.youtube.com/embed/GOW1oxrwUz0" 
    title="Coffee Recipe Javascript Project"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</figure>

The idea of the Link i posted uses the srcdoc property and creates a Link with the video-poster inside of it. The video will only be loaded if the user clicks the link.
To use the poster directly from youtube, I need access to the poster directly or the Video-ID.

If I understand this correctly, it all happens in the embed-helper which only exports the final embed-url, right?

4

I think t’s happening here:

And, unfortunately, the logic used to extract the id from the URL is not accessible: the function directly returns a whole <iframe> element.

If you know it will always be a youtube url, it’s probably easiest to use some kind of regex in your block snippet:

<?php

$re = '/(?:youtube(?:-nocookie)?\.com\/.*(?:v=|[ev]\/|v%3D|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]+)/';
$url = $block->url()->value();
preg_match($re, $url, $match);
$id = $match[1] ?? false;

echo $id;
5

Thank you for the infos. I almost expected that i have to do it this way, but thought maybe there is a simpler solution. I will test this with the following:

<?php

$url = $block->url()->value();

$youtube_re = '/(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/';
$vimeo_re = '/(?:vimeo\.com\/|player\.vimeo\.com\/video\/)([0-9]+)/';

if (preg_match($youtube_re, $url, $youtube_match)) {
    // It's a YouTube URL
    $video_id = $youtube_match[1];
    $embed_url = "https://www.youtube.com/embed/$video_id";
} elseif (preg_match($vimeo_re, $url, $vimeo_match)) {
    // It's a Vimeo URL
    $video_id = $vimeo_match[1];
    $embed_url = "https://player.vimeo.com/video/$video_id";
} else {
    // URL doesn't match either pattern
    $embed_url = false;
}

echo $video_id;

?>