bootstrap dropdown menu bar not functional

I am trying to create a dropdown bar using bootstrap in a Django website. Basically what I want to do is that I want a bar with the title of a class and when someone clicks the bar the class video will open as a dropdown menu. But for some reason it's not working. The {{ item.title }} is appearing on the bar but the dropdown is not working. So users can't see the video. Can anyone help me solve this?

My html file:

{% extends "class/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
  <h1>{{ object.title }}</h1>
    {% for item in object.classes.all %} 
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{ item.title }}
          </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <button class="dropdown-item" type="button"><video controls width="250"> <source src="{{ item.video.url }}" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video></button>
              </div>
        </div>
        
        
    {% endfor %}

{% endblock content %}

Thanks in advance!