Browse Source

made iframes draggable

master
alicestrt 4 years ago
parent
commit
db00617080
  1. 13
      hello.py
  2. 17
      static/css/style.css
  3. 13
      templates/perspectiveA.html

13
hello.py

@ -3,6 +3,19 @@ from flask import render_template
app = Flask(__name__) 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('/') @app.route('/')
def hello_world(): def hello_world():
return 'Hello, World!' return 'Hello, World!'

17
static/css/style.css

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

13
templates/perspectiveA.html

@ -1,7 +1,10 @@
<!doctype html> <!doctype html>
<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> <head>
<link rel="stylesheet" href="../static/css/style.css"> <link rel="stylesheet" href="../static/css/style.css?q=1280549780">
<title>Perspective A</title> <title>Perspective A</title>
</head> </head>
<body> <body>
@ -10,11 +13,11 @@
<audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio> <audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>
</div> </div>
<div id="video1"> <div class="draggable">
<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> <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>
<div id="video2"> <div class="draggable">
<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> <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> </div>
</body> </body>
</html> </html>

Loading…
Cancel
Save