Currently, I am working on developing a Flask application that displays a list of videos fetched from a database in an HTML template. Upon clicking a video link, the video opens and plays in a pop-up window with arrow buttons for navigating to the next or previous video, and a close button to exit the pop-up window.
Below is a snippet of my Jinja2 template along with the corresponding JavaScript code:
{% extends "base_nav2.html" %}
{% block content %}
<div id="works">
<div class="container">
{% if results %}
<center><h2>Results for Query: {{ query }}</h2></center>
<div class="row text-center page" style="display:flex; flex-wrap:wrap;">
{% for p in results %}
<div class="col-md-3 col-sm-6">
<div class="thumbnail" style="height: 162; width: 284">
<img src="{{ url_for('static', filename=p.thumb) }}">
<div class="caption">
<a href="#media-popup" data-media="{{ url_for('static', filename=p.path) }}">{{p.filename}}</a><br>
</div>
</div>
</div>
{% endfor %}
<div class="popup" id="media-popup">
<a href="#media-close" id="media-prev" style="margin-top: -10;"><i class="fa fa-arrow-left fa-4x" style="margin-top: -10;"></i></a>
<a href="#media-close" id="close" align="right"><i class="fa fa-window-close fa-4x" aria-hidden="true"></i></a>
<a href="#media-close" id="media-next"><i class="fa fa-arrow-right fa-4x"></i></a>
</div>
</div>
{% else %}
<center><h2>No results found for Query: {{ query }}</h2></center>
{% endif %}
<div>
</div>
<script>
// JavaScript code for video pop-up functionality goes here
</script>
{% endblock %}
CSS:
.page {
position: relative;
height: 100%;
}
.popup {
position: absolute;
z-index: 2;
margin-top: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.show-popup .popup {
opacity: 1;
visibility: visible;
}
Preview of the video pop-up design
I am seeking advice on how to position the arrow buttons next to the player and the close button in the corner of the shaded area. I have tried different strategies without success. Can you recommend the best approach to achieve this layout?