Video full size (#333)

Author: fuentesloic

core/helpers.py

@@ -59,11 +59,16 @@ def _replace_embed(match):
     youtube_id = extract_youtube_id(url)
     if not youtube_id:
         return url
-    return f'''<iframe class=video width=auto height=auto
-        src=https://www.youtube-nocookie.com/embed/{youtube_id}
-        frameborder=0 allow="autoplay; encrypted-media" allowfullscreen>
-        </iframe>
-        <small>{url}</small>'''
+    return f'''
+        <div class=video>
+            <iframe
+                src=https://www.youtube-nocookie.com/embed/{youtube_id}
+                frameborder=0
+                allow="autoplay; encrypted-media"
+                allowfullscreen>
+            </iframe>
+            <small>{url}</small>
+        </div>'''
 
 
 @app.template_filter()

static/css/article.css

@@ -26,9 +26,18 @@ body {
   margin-top: 2rem;
 }
 
-.blog-article .content a {
-  color: var(--color-primary);
-  text-decoration: underline dotted var(--color-primary);
+.blog-article .video {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+}
+
+.blog-article .video  > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .blog-article .content a:active,

static/js/article.js

@@ -1,5 +1,3 @@
-console.debug('>>>', document.querySelectorAll('article .content img'))
-debugger
 Array.from(document.querySelectorAll('article .content img')).forEach(img => {
   const rects = img.getClientRects()[0]
   img.style.width = `${rects.right}px`