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

Popular posts from this blog