Showing and playing video's in Twig templates I want to be able to upload and play videos on my Craft CMS website.
I created a volume and field to hold these videos.
So far so good, but whenever I want to output the video in a video tag I'm not sure how to get the URL of the video.
My code:
{% set video = component.video %}
{% if video %}
   &lt;video width=&quot;800&quot; height=&quot;500&quot; controls&gt;
      &lt;source src=&quot;## VIDEO URL ##&quot; type=&quot;video/mp4&quot;&gt;
   &lt;/video&gt;
{% endif %}
You're close!
Because an asset field can potentially contain multiple items you need to explicitly select the first one, so:
{% set video = component.video.one() %}
But that doesn't get the actual url of the video, to get that you need to request it:
{{ video.url() }}
So in your case:
{% set video = component.video.one() %}
{% if video %}
   &lt;video width=&quot;800&quot; height=&quot;500&quot; controls&gt;
      &lt;source src=&quot;{{ video.url() }}&quot; type=&quot;video/mp4&quot;&gt;
   &lt;/video&gt;
{% endif %}

If you do find yourself needing to show multiple files, then you'd wrap it within a loop:
{# Get all the files #}
{% set videos = component.video.all() %}

{# Check to see if videos has anything in it with '|length' #}
{% if videos|length %}
    {% for video in videos %}
       &lt;video width=&quot;800&quot; height=&quot;500&quot; controls&gt;
          &lt;source src=&quot;{{ video.url() }}&quot; type=&quot;video/mp4&quot;&gt;
       &lt;/video&gt;
    {% endfor %}
{% endif %}