I am working on a Django project and have a video.html file for displaying videos.
The code I currently have is used to display the video, but I would like to change the appearance of the play button and add a download button similar to this https://i.sstatic.net/whupN.png
<div class="row portfolio-container">
{% for portfolio in portfolio %}
<div class="col-lg-4 col-md-6 portfolio-item">
<a href="{{ portfolio.file.url }}" download>
<video id="{{portfolio.id}}" onclick="videoviews({{portfolio.id}})" class="video-js vjs-theme-forest" controls preload="auto" width="360" height="264" data-setup="{}">
<button class="btn"><i class="fa fa-download"></i> Download</button>
<source src="{{ portfolio.file.url }}" type="video/mp4" >
</video>
</a>
<div class="mx-auto my-1 col-lg-12 d-block" style="font-size: 10px;">
<p class="float-left">
<span class="font-weight-bold">Uploaded by:</span> <a href="{% url 'profile' username=portfolio.user.username %}">{{portfolio.user}}</a>
</p>
<p class="float-right">
<span class="font-weight-bold" id="views{{portfolio.id}}">{{portfolio.views}}</span>
</p>
</div>
</div>
Here is a screenshot of the current video frame. https://i.sstatic.net/SCVDR.jpg I'm new to Django and Javascript, so any help would be appreciated.