Django: How to embed a video in <iframe> using the URL sourced from the database in Django?

Viewed 98

I have a Django app that displays a list of videos (ListView). On clicking each item in the ListView, I get directed to DetailView where that specific video is displayed. I am trying to accomplish this by: enter image description here

{% extends 'base.html' %}
{% load embed_video_tags %}
    {% block content %}
    </br>
    </br>
    </br>
    </br>
        <div class="post-entry">
        <div class="card" style="">
        <div class="card-body">
            <!-- sourcing the URL directly -->
            <iframe 
                width="560" 
                height="315" 
                src="https://www.youtube.com/embed/T9ikpoF2GH0" 
                title="YouTube video player" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowfullscreen>
            </iframe></br>
            <!-- sourcing URL from django model -->
            <iframe 
                width="560" 
                height="315" 
                src="{{object.URL}}"
                title="YouTube video player" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowfullscreen>
            </iframe></br>
            <!-- info from model -->
            <a href="#" class="btn btn-primary">Video </a>
            <a href="#" class="btn btn-success">Audio </a>
            <div class="">
                <h5 class="card-title text-left"> Title: {{object.title}}</h5>
                <h6 class="card-text  text-left ">Guest: {{object.guest_firstName}} {{object.guest_lastName}}</h6>
                <h6 class="card-text  text-left ">Host: {{object.host_firstName}} {{object.host_lastName}}</h6>
                <h6 class="card-text  text-left ">Description: {{object.description}} </h6>
                <h6 class="card-text  text-left ">Topics: {{object.topics}} </h6>
                <h6 class="card-text  text-left ">Date Published: {{object.date_published}} </h6>
                <h6 class="card-text  text-left "> URL: {{object.URL}} </h6>
            </div>
            </br>
        </div>
        </div>


    {% endblock content %}

I can see that the URL as a text is modeled properly.

enter image description here

This is how it's supposed to look. The image below shows the embedded video by hard passing the URL in the . But I want to pass the URL dynamically to the src="<URL sourced to database>" from the database.

Please help me.

2 Answers

You must ensure the URL contains embed rather watch as the /embed endpoint allows outside requests, whereas the /watch endpoint does not.

<iframe src="https://www.youtube.com/embed/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>

You're tying doing this instead:

<iframe src="https://youtu.be/T9ikpoF2GHO" frameborder="0" allowfullscreen></iframe>

Source: https://stackoverflow.com/a/25661346/1242842

I had the same experience and I solved it by adding video id after embed. In your case it should be as

<iframe src="https://www.youtube.com/embed/YourVideoId" frameborder="0" allowfullscreen></iframe>
Related