Videos Not Showing Up In Django HTML Form

Using Django Templates & Frontend
1

Hello everyone, I am trying to create a query that includes all of the ‘Video’ objects that are inside a list inside my view function.

The following is the view function:

def BuenosAiresVideos(request):
    videoList = ["Buenos Aires", "Caminito",
                 "Buenos Aires Drone Footage", "Recoleta Cemetery"]

    # videos = Video.objects.filter(title__in=videoList)
    videos = Video.objects.all()

    context = {
        'videos': videos,
    }

    return render(request, 'map_app/buenos-aires-videos.html', context)

For some reason when I attempt to grab all of the video objects with videos = Video.objects.all(), this statement only grabs the video titled “Buenos Aires”.

As a result, the following is what I am seeing inside the HTML file:

buenos-aires
buenos-aires483×567 26.3 KB

The following is the HTML file:

{% load embed_video_tags %}
<!DOCTYPE html>
<html>
<body>
{% block content %}
<h1 class="mb-5">Buenos Aires Travel Videos</A></h1>

<div class="d-flex flex-wrap">
    {% for item in videos %}
        <div class="px-3 mb-5">
            <!-- {% if item.title == 'Buenos Aires' %} -->
                {% video item.url '426x240' %}
                <div class="d-flex justify-content-start">
                    {{ item.title }}
                </div>
            <!-- {% endif %} -->
        </div>
    {% endfor %}
</div>
{% endblock %}
</body>
</html>

The others videos appear to be inside the database when I grab them in the python shell:

videoObjects
videoObjects1014×233 22.2 KB

Please help me understand why the only video displaying is “Buenos Aires”. Thank you.

2

Because of your if tag. An html comment does not prevent a template tag from being processed. If you want to comment out a template tag, you need to use the comment tag.

2 Likes
3

TIL!

I looked at the code previously and had no idea what is wrong. Thanks

It makes sense but since I saw it as greyed out it did not occur to me.

4

Wow! I would have never thought of that! Thank you both for resolving this! :grinning:

I appreciate the help.

6

What I am trying to do now is have the videos displayed in a way that they are in the center of the web page.

When I add “text-align: center;” to the .video-content class in the city-details.css file, it only moves the title of each video, but not the actual video itself.

The following code is what I currently have for the .video-content class:

.video-content {
    display: flex;
    flex-wrap: wrap;
}

I have even tried using to wrap around each video, but that does not seem to center the videos either.

The following is the buenos-aires-videos.html file:

{% load static %}
{% load embed_video_tags %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'styles/city-details.css' %}" type="text/css"/>
</head>
<body>

<center>
    <h1 class="mb-5">Buenos Aires Travel Videos</h1>

    <div class="video-content">
        {% for item in videos %}
            <div class="px-3 mb-5">
                    {% video item.url '426x240' %}

                    <!--Put the title of each video at the bottom of
                        each video.-->
                    <div class="d-flex justify-content-start">
                        {{ item.title }}
                    </div>
            </div>
        {% endfor %}
    </div>
</center>

</body>
</html>

The following is what I am seeing on the web page:

buenosvideos
buenosvideos1365×620 499 KB

Any suggestions on how I can display the videos in the center of the web page?