Add playsinline attribute to <video> tag to support autoplay on modern iOS devices

Problem/Motivation

Currently, the HTML5 <video> element used in the hero banner does not include the playsinline attribute. On modern iOS devices (e.g., iPhone 16 with iOS 17+), this results in the video not autoplaying, even if autoplay, loop, and muted are set.

Proposed resolution

For local file
Update the HTML output for the <video> element to include the playsinline attribute:

  <video class="hero__banner-video--html5-player object-fit-cover h-100 w-100" loop muted playsinline autoplay>
    <source src="{{ media.url }}" type="video/mp4">
  </video>

For Vimeo:

Update the HTML output for the <iframe> element to include the playsinline=1 attribute:

          {% block hero_vimeo %}
            <iframe
              class="hero__banner-video--vimeo-player" 
              src="https://player.vimeo.com/video/{{ media.vimeoId }}?muted=1&background=1&loop=1&playsinline=1"
              width="640"
              height="360"
              frameborder="0"
              allow="autoplay; fullscreen; encrypted-media"
              allowfullscreen>
            </iframe>
          {% endblock %}

For YT:

Replace the classes d-none and d-lg-block to d-block

          {% block hero_youtube %}
            <div class="hero__banner-video--youtube-player d-block">
              <div id="hero__banner-video--youtube"></div>
            </div>
            <img class="d-block hero__banner--img" src="https://img.youtube.com/vi/{{ media.youtubeId }}/maxresdefault.jpg" alt="{{ content.field_title.0['#context'].value|render|trim|striptags }}" />
          {% endblock %}