Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-04-20T13:31:05.773Z
Answers.LastActivityDate: 2021-04-20T14:22:47.233Z
Answers.LastEditDate: 2021-04-20T14:22:47.233Z
Answers.UserDisplayName: dmatthams
Body: <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>
  
Tags: <templating><assets>
Title: Showing and playing video's in Twig templates
ThreadText: # 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 %}
     <video width="800" height="500" controls>
        <source src="## VIDEO URL ##" type="video/mp4">
     </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 %}
     <video width="800" height="500" controls>
        <source src="{{ video.url() }}" type="video/mp4">
     </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 %}
         <video width="800" height="500" controls>
            <source src="{{ video.url() }}" type="video/mp4">
         </video>
      {% endfor %}
  {% endif %}
  
  ```
  
  
  ---
  
  