Add attribute checkbox for 'playsinline'

Created on 27 February 2023, over 1 year ago
Updated 2 March 2023, over 1 year ago

(Like in my previous issue, first of all many thanks for a great module!)

What I ran into: I added a self-hosted video to a site: added a video field to my content type, displayed through Views. Views offers several options for video players; of these only HTML5 Video Player Compact works. Both the video field form display and the Views (HTML 5 compact) video player give options for 'show controls, autoplay, loop, muted'.

I quickly discovered that whilst all works perfect across browsers and platforms, the video doesn't outplay on iPhone or iPad! Quite a big chunk of the audience.. I solved this by adding 'playsinline' to the attributes in the video-player-formatter.html.twig template in the video module (/modules/contrib/video/templates/video-player-formatter.html.twig):

<video preload="{{ player_attributes.preload }}" {{ player_attributes.controls ? 'controls' : '' }} style="width:{{ player_attributes.width }}px;height:{{ player_attributes.height }}px;" {{ player_attributes.autoplay ? 'autoplay' : '' }} {{ player_attributes.loop ? 'loop' : '' }} {{ player_attributes.muted ? 'muted' : '' }} playsinline>

It would be great if this option would be available as a checkbox in the video field form display options (and in views)?

Xander

Feature request
Status

Active

Version

3.0

Component

General

Created by

🇬🇧United Kingdom xax London, UK

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @xax
  • 🇬🇧United Kingdom xax London, UK

    Additional info: after I added playsinline in the twig, I discovered that now my phone etc worked great, but lap- and desktops now didn't autoplay anymore.. I have solved this leveraging bootstrap in the twig (see below) - but I assume there may be a more elegant javascript way adding 'playsilne' only when mobile/tablet detected -

    {# mobile / ipad #}
    <div class="d-block d-md-none">
      <video preload="{{ player_attributes.preload }}" {{ player_attributes.controls ? 'controls' : '' }} style="width:{{ player_attributes.width }}px;height:{{ player_attributes.height }}px;" {{ player_attributes.autoplay ? 'autoplay' : '' }} {{ player_attributes.loop ? 'loop' : '' }} {{ player_attributes.muted ? 'muted' : '' }} playsinline>
        {% for user in items %}
          <source src="{{ user }}"/>
        {% endfor %}
      </video>
     </div>
     
     {# larger than mobile #}
    <div class="d-none d-md-block">
      <video preload="{{ player_attributes.preload }}" {{ player_attributes.controls ? 'controls' : '' }} style="width:{{ player_attributes.width }}px;height:{{ player_attributes.height }}px;" {{ player_attributes.autoplay ? 'autoplay' : '' }} {{ player_attributes.loop ? 'loop' : '' }} {{ player_attributes.muted ? 'muted' : '' }} >
        {% for user in items %}
          <source src="{{ user }}"/>
        {% endfor %}
      </video>
    </div>
    
Production build 0.71.5 2024