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