diff options
| -rw-r--r-- | pydis_site/static/css/home/timeline.css | 14 | ||||
| -rw-r--r-- | pydis_site/templates/home/timeline.html | 24 |
2 files changed, 12 insertions, 26 deletions
diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 07e17e15..89de0887 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -61,20 +61,6 @@ button, input, textarea, select { background-color: #576297 !important; } -.video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 75%; -} -.video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - .pydis-logo-banner { background-color: #7289DA !important; border-radius: 10px; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 54cbdc1b..f3c58fc2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -14,7 +14,7 @@ <div class="container max-width-lg cd-timeline__container"> <div class="cd-timeline__block"> <div class="cd-timeline__img cd-timeline__img--picture"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> + <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> <div class="cd-timeline__content text-component"> @@ -231,8 +231,8 @@ <div class="cd-timeline__content text-component"> <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -319,8 +319,8 @@ developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -377,8 +377,8 @@ Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -450,8 +450,8 @@ Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -481,13 +481,13 @@ <div class="cd-timeline__block"> <div class="cd-timeline__img cd-timeline__img--picture"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> + <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> <div class="cd-timeline__content text-component"> <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |