Update video display feature

RizwanMunawar · Dec 15, 2024 · 51d12d4 · 51d12d4
1 parent 13fc0db
commit 51d12d4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/docs/overrides/stylesheets/style.css b/docs/overrides/stylesheets/style.css
@@ -57,10 +57,20 @@ figure {
 /* For visual iframe and its div Styles for the parent div */
 .embed-container {
     position: relative;
-    padding-bottom: 56.25%; /* Aspect ratio for 16:9 */
+    padding-top: 56.25%; /* Aspect ratio for 16:9 */
     height: 0;
     overflow: hidden;
     max-width: 100%;
+    width: 100%;
+}
+
+.embed-container video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Ensures no stretching */
 }
 
 /* Style for iframe elements */

diff --git a/docs/usecases/bird-tracking-with-tracks-visualization-on-empty-image.md b/docs/usecases/bird-tracking-with-tracks-visualization-on-empty-image.md
@@ -208,9 +208,10 @@ cv2.destroyAllWindows()
 
 It's time to watch the Output 🚀
 <div class="embed-container">
-  <iframe src="https://drive.google.com/file/d/1QkCcTqfZmB9aPIb9ml62je-A3hljdCR-/preview" 
-          allow="autoplay">
-  </iframe>
+  <video controls autoplay loop>
+    <source src="https://github.com/RizwanMunawar/visionusecases/releases/download/v1.0.0/bird-tracking-with-trajectory.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>
 </div>
 
 ### Real World Applications