Connecting to YouTube Channel
#main.py from flask import Flask from routes.index import Index app = Flask(__name__) index = Index() index.register(app, route_base='/') if __name__ == '__main__': app.run(debug=True)
#routes/index.py from flask import render_template from flask_classful import FlaskView, route class Index(FlaskView): def __init__(self): super().__init__() @route('/') def index(self): return render_template('index.html', data={'siteTitle':'ទូរទស្សន៍យើង'})
<!--templates/index.html--> {% extends "base.html" %} {% block head %} {{ super() }} <link href="/static/styles/index.css" rel="stylesheet" > <script src="/static/scripts/index.js"></script> {% endblock %} {% block channel %} <div class="channel region"> <div class="channel-outer"> <iframe src="https://www.youtube.com/embed/videoseries?list=UUHwYHdX37UUt6d9e1wAp9Bw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> <div class="channel-outer"> <iframe src="https://www.youtube.com/embed/videoseries?list=UUC3kuksIZZQO6kVQlApEW1w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> <div class="channel-outer"> <iframe src="https://www.youtube.com/embed/videoseries?list=UUd3Jmi0SGGG-NvcEOge6bxw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> <div class="channel-outer"> <iframe src="https://www.youtube.com/embed/videoseries?list=UUGCeeEq-6y85svJ1atW5Bvw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> </div> {% endblock %}
/*static/styles/index.css*/ .channel{ margin-top: 10px; display: grid; grid-template-columns: auto auto; grid-gap: 10px; padding: 10px; background: black; } .channel .channel-outer{ position: relative; padding-top: 56.25%; } .channel iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 600px){ .channel{ grid-template-columns: 100%; } }
GitHub: "https://github.com/Sokhavuth/ETV
Heroku: https://khmerweb-etv.herokuapp.com/
Comments
Post a Comment