made iframes draggable

This commit is contained in:
alicestrt 2020-09-08 20:31:48 +02:00
parent 86f35d2501
commit db00617080
3 changed files with 35 additions and 8 deletions

View File

@ -3,6 +3,19 @@ from flask import render_template
app = Flask(__name__)
@app.context_processor
def override_url_for():
return dict(url_for=dated_url_for)
def dated_url_for(endpoint, **values):
if endpoint == 'static':
filename = values.get('filename', None)
if filename:
file_path = os.path.join(app.root_path,
endpoint, filename)
values['q'] = int(os.stat(file_path).st_mtime)
return url_for(endpoint, **values)
@app.route('/')
def hello_world():
return 'Hello, World!'

View File

@ -1,13 +1,24 @@
* {
background-color: gray;
}
#video1 {
padding-top: 100px;
margin-top: 300px;
}
.draggable {
position: absolute;
}
.draggable img {
opacity: 0.7;
}
.draggable iframe {
padding: 20px;
}
#video2 {
padding-top: 100px;
position: relative;
margin-top: 100px;
}
#audio1 {

View File

@ -1,7 +1,10 @@
<!doctype html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../static/js/draggable.js"></script>
<head>
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/style.css?q=1280549780">
<title>Perspective A</title>
</head>
<body>
@ -10,11 +13,11 @@
<audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>
</div>
<div id="video1">
<iframe width="420" height="281" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="draggable">
<iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="video2">
<iframe width="340" height="250" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="draggable">
<iframe id="video2" width="120" height="120" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>