# How to Play Videos with Django 5.1

**URL:** https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360
**Category:** Templates & Frontend
**Created:** [January 29, 2025, 5:49pm UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360 "2025-01-29T17:49:18Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![avilca](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/avilca/32/26582_2.png) [@avilca](https://forum.djangoproject.com/u/avilca)
#### Post date: [January 29, 2025, 5:49pm UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/1 "2025-01-29T17:49:18Z")

</div>

I’m making a website with Django 5.1 and bootstrap 5.3 that generates projects and each project has its own video. I want to show the video of each project. The videos are being saved in the local media/video folder. The way to load the videos I did it with a upload\_to in my models.py and it saves the videos well but I don’t know how to play the videos.

---

<div class="post-metadata">

### Author: ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2025, 9:42pm UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/2 "2025-01-29T21:42:55Z")

</div>

Welcome @avilca !

You would add a `<video>` element to your template, with the `<source>` element having a reference to the url for the video in the `src` attribute.

See [\<video\>: The Video Embed element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) for more details.

---

<div class="post-metadata">

### Author: ![avilca](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/avilca/32/26582_2.png) [@avilca](https://forum.djangoproject.com/u/avilca)
#### Post date: [January 29, 2025, 10:14pm UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/3 "2025-01-29T22:14:13Z")

</div>

A file video is a static file ??

---

<div class="post-metadata">

### Author: ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2025, 10:48pm UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/4 "2025-01-29T22:48:07Z")

</div>

If it has been uploaded by a user, then it’s technically a `media` file, not a `static` file. That means you get the `url` from the model instance and not using the `static` tag.

---

<div class="post-metadata">

### Author: ![avilca](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/avilca/32/26582_2.png) [@avilca](https://forum.djangoproject.com/u/avilca)
#### Post date: [January 29, 2025, 10:57pm UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/5 "2025-01-29T22:57:16Z")

</div>

The user can upload n projects and each project have a video

example:

project1 —\> video 1  
project2 —\> video 2  
project3 —\> video 3  
.  
.  
.  
N

models.py

```auto
class Project(models.Model):
    title = models.CharField(max_length=200, verbose_name='Título')
    description = models.TextField(verbose_name='Descripción')
    filevideo = models.FileField(upload_to='media/videos/', null=True)`

```

settings.py

```auto
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.1/howto/static-files/

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / 'media',
]

```

proyectos.html

```auto
{% block content %}

<br/>
<main class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card">
          <div class="card-body">
             {% for project in projects %}
  
                <h5 class="card-header">{{project.title}} </h5>
                <p class="card-text">
                  {{project.description}}
                </p>

                <video src="..." class="object-fit-contain" autoplay>
                   {{project.filevideo}}
                </video>

            {% endfor %}
          </div>
         
        </div>

      </div>
    </div>
</main>

    

{% endblock %}

```

Show me web

imagen

 ![web-project](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/1/5/153fc0cd49701d4e56bfd0c76081cee74da1f8de.png)

Any suggestions ???

---

<div class="post-metadata">

### Author: ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 30, 2025, 1:47am UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/6 "2025-01-30T01:47:01Z")

</div>

What is your question?

---

<div class="post-metadata">

### Author: ![avilca](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/avilca/32/26582_2.png) [@avilca](https://forum.djangoproject.com/u/avilca)
#### Post date: [January 30, 2025, 3:21am UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/7 "2025-01-30T03:21:11Z")

</div>

Switch to this form but still doesn’t show the video

```auto
<video src= {{project.filevideo}} class="object-fit-contain" autoplay>

```

How to display the video ?

---

<div class="post-metadata">

### Author: ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 30, 2025, 11:21am UTC](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/8 "2025-01-30T11:21:45Z")

</div>

See the docs and the example referenced above at [How to Play Videos with Django 5.1 - #2 by KenWhitesell](https://forum.djangoproject.com/t/how-to-play-videos-with-django-5-1/38360/2). You don’t put the `src` attribute on the `<video>` element, you use the `src` attribute on the `<source>` element.

You also need to use the [`.url`](https://docs.djangoproject.com/en/5.1/ref/models/fields/#django.db.models.fields.files.FieldFile.url) property of the file field on the model to render the url to be used in the `src` attribute.