Reponsive YouTube player

Author: Simran-B

_includes/youtube-playlist.html

@@ -1 +1,3 @@
-<iframe width="770" height="433" src="https://www.youtube-nocookie.com/embed/videoseries?list={{ include.id }}&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+<div class="video">
+  <iframe src="https://www.youtube-nocookie.com/embed/videoseries?list={{ include.id }}&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

_includes/youtube.html

@@ -1 +1,3 @@
-<iframe width="770" height="433" src="https://www.youtube-nocookie.com/embed/{{ include.id }}?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="video">
+  <iframe src="https://www.youtube-nocookie.com/embed/{{ include.id }}?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>

styles/site.css

@@ -195,6 +195,17 @@ nav {
     margin-bottom: 40px;
 }
 
+.video {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+}
+
+.video iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
 @media screen and (max-width: 1020px) {
     .arangodb-navmenu li div.searchbar {display: none;}
     .arangodb-navmenu li div.placeholder {display: none;}