Formato video links OK

elswork · Dec 8, 2023 · 32a1ef4 · 32a1ef4
1 parent 1d14a62
commit 32a1ef4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/content/links/index.md b/content/links/index.md
@@ -13,11 +13,13 @@ eleventyNavigation:
 <div class="links-container">
 {% for link in links %}
     <div class="link-item">
-        {% if link.url and (link.url.includes('youtube.com') or link.url.includes('youtu.be')) %}
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/{{ link.url | youtubeID }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        {% else %}
             <a href="{{ link.url }}" target="_blank" class="link-title">{{ link.title }}</a>
             <p class="link-description">{{ link.description }}</p>
+        {% if link.url and (link.url.includes('youtube.com') or link.url.includes('youtu.be')) %}
+            <div class="video-container">
+                <iframe src="https://www.youtube.com/embed/{{ link.url | youtubeID }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>
+        {% else %}
             <div class="gallery">
                 <button class="gallery-prev">◀</button>
                 <button class="gallery-next">▶</button>

diff --git a/public/css/bundle.css b/public/css/bundle.css
@@ -240,3 +240,18 @@ footer p {
     right: 10px;
 }
 
+.video-container {
+    position: relative;
+    width: 100%; /* O un ancho máximo específico si lo prefieres */
+    padding-top: 56.25%; /* Proporción para vídeos de YouTube (16:9) */
+    margin: 15px 0;
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+