Agrego responsive para la vista de videos

sedici · Oct 25, 2022 · 5a277f9 · 5a277f9
1 parent 76079a0
commit 5a277f9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/media/css/styles.css b/media/css/styles.css
@@ -76,6 +76,8 @@ display: none;
 	list-style: none;
 }
 
+/* CSS para iframe y videos */
+
 .loader {
 	border: 16px solid #f3f3f3;
 	border-radius: 50%;
@@ -95,4 +97,22 @@ display: none;
   @keyframes spin {
 	0% { transform: rotate(0deg); }
 	100% { transform: rotate(360deg); }
+  }
+
+  .containerDspaceVideo {
+	position: relative;
+	overflow: hidden;
+	width: 100%;
+	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+  }
+
+  /* Then style the iframe to fit in the container div with full height and width */
+  .responsive-iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height:100%;
   }
diff --git a/media/js/embedVideo.js b/media/js/embedVideo.js
@@ -15,7 +15,7 @@ function get_data_and_template(method, data_params, divVideo) {
                 divVideo.children('.searching').hide();
                 if ((videos.length >0) && (divVideo.children('iframe').length == 0)) {
                     for (var i = 0; i < videos.length; ++i){
-                        divVideo.append('<iframe  width="350" height="370" src="'+ videos[i]+ '"></iframe>');                    }
+                        divVideo.append('<div class="containerDspaceVideo"><iframe class="responsive-iframe" src="'+ videos[i]+ '"></iframe></div><br>');                    }
                     ;
                 }
                 else if ((videos.length == 0) && (divVideo.children('p .notFound').length == 0)) {