Spaces:
Sleeping
Sleeping
File size: 2,461 Bytes
05dff9f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
{% extends "base.html" %}
{% block title %}Watch Video: {{ video.title }}{% endblock %}
{% block content %}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
<style>
.video-player-container {
max-width: 800px;
margin: 30px auto;
padding: 25px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
}
.video-player-container h1 {
font-family: 'Montserrat', sans-serif;
color: #007bff;
margin-bottom: 20px;
font-size: 2em;
}
.video-embed {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.action-button {
background-color: #28a745; /* Green for completion */
color: white;
padding: 15px 30px;
font-size: 1.1em;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease;
display: inline-block;
margin-top: 10px;
}
.action-button:hover {
background-color: #218838;
transform: translateY(-2px);
}
.back-link {
margin-top: 20px;
display: block;
color: #007bff;
text-decoration: none;
font-weight: 600;
}
.back-link:hover {
text-decoration: underline;
}
</style>
<div class="video-player-container">
<h1>{{ video.title }}</h1>
<div class="video-embed">
<iframe src="{{ video.url }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<a href="{{ url_for('complete_video', video_id=video.id) }}" class="action-button">I've watched this video, mark complete & take quiz!</a>
<a href="{{ url_for('dashboard') }}" class="back-link">Back to Dashboard</a>
</div>
{% endblock %} |