<p>You're close!</p>
<p>Because an asset field can potentially contain multiple items you need to explicitly select the first one, so:</p>
<p><code>{% set video = component.video.one() %}</code></p>
<p>But that doesn't get the actual url of the video, to get that you need to request it:</p>
<p><code>{{ video.url() }}</code></p>
<p>So in your case:</p>
<pre><code>{% 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 %}
</code></pre>
<p>If you do find yourself needing to show multiple files, then you'd wrap it within a loop:</p>
<pre><code>{# 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 %}
</code></pre>

CC BY-SA 4.0
2021-04-20T13:31:05.773Z
2021-04-20T14:22:47.233Z
2021-04-20T14:22:47.233Z
dmatthams
<p>I want to be able to upload and play videos on my Craft CMS website.</p>
<p>I created a volume and field to hold these videos.
So far so good, but whenever I want to output the video in a <code>video</code> tag I'm not sure how to get the URL of the video.</p>
<p>My code:</p>
<pre><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 %}
</code></pre>

<templating><assets>
Showing and playing video's in Twig templates
# Showing and playing video's in Twig templates

(Asked by: username_0 on 2021-04-20)

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 %}
   
      
   
{% endif %}

**Tags:** templating, assets

---

## 1 answers

### Answer by username_1 on 2021-04-20. Score: 3 | Accepted answer

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 %}
   
      
   
{% 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 %}
       
          
       
    {% endfor %}
{% endif %}


---

