Portfolio - Components

View All Components

Component: 

Features:

  1. add video from YouTube, Vimeo and mp4 uploads
  2. 16:9 ratio

Notes:

  1. script added to prevent videos from same providers overplaying each other


 

Watch Short Video

Videos

field--paragraph--video-repeater.html.twig

 
<div class="row">

{% for item in items %}

{{ item.content }}

{% endfor %}

</div>
paragraph--video.html.twig

 
{% set id = paragraph.field_video_id.value %}

{% set plat = paragraph.field_video_platform.value %}

{% set mp4 = file_url(content.field_mp4_upload['#items'].entity.uri.value) %}


{% block paragraph %}

    {% block content %}

      <div class="col-lg-4 mb-4">

        <div class="ratio ratio-16x9">

    {% if plat == "1" %}

            <iframe title="YouTube" frameborder="0" src="https://www.youtube.com/embed/{{ id }}?enablejsapi=1&rel=0&modestbranding=1" allowfullscreen></iframe>

    {% elseif plat == "2" %}

            <iframe title="Vimeo" class="w-100" src="https://player.vimeo.com/video/{{ id }}?h=1699409fe2&color=ef2200&byline=0&portrait=0&autopause=1&quality=1080p" frameborder="0" allow="fullscreen" mozallowfullscreen webkitallowfullscreen allowfullscreen></iframe>

     {% elseif plat == "3" %}

            <video class="mp4-player" width="100%" controls>

              <source src="{{ mp4 }}" type="video/mp4">

              Your browser does not support HTML video.

            </video>

    {% endif %}

        </div>

      </div>

    {% endblock %}

{% endblock paragraph %}