Widget:Video: Difference between revisions

VisualWikitext

Latest revision as of 10:39, 15 December 2023

Sample result

She Was Dreamin' of Boys

Early Endless Summer

@@ Line 1: / Line 1: @@
 <noinclude>__NOTOC__
 == Sample result ==
-{{#widget:Video|url=/images/4/46/SheWasDreaminOfBoys.mp4}}
+{{#widget:Video|url=/images/4/46/SheWasDreaminOfBoys.mp4|caption=She Was Dreamin' of Boys}}
-{{#widget:Video|url=/images/8/84/EarlyEndlessSummer.mp4}}
+{{#widget:Video|url=/images/8/84/EarlyEndlessSummer.mp4|caption=Early Endless Summer}}
 </noinclude>
 <includeonly>
-<html>
+<figure class="video-wrapper">
-<head>
+<div class="video-outer">
-<style>
+<video id="content-video" controls>
- #video-outer {
+<source id="video-source" type="video/webm" src="<!--{$url|escape:'urlpathinfo'}-->" >
-     background-position: center;
-     background-size: contain;
-     background-repeat: no-repeat;
-     border-radius: 1%;
-     background-image: url(/images/7/75/Television.png);
-     width: 448px;
-     height: 408px;
-     position: relative;
-     float: none;
-     margin: 0 auto;
-     margin-bottom: 1em;
-     clear: both;
-     z-index: 1;
-}
-.infobox #video-outer {
-	width: 300px !important;
-    height: 273px !important;
-}
-}
- @media screen and (max-width: 1400px) {
-     #video-outer {
-         width: 329px;
-         height: 300px;
-    }
-}
-#video-outer video {
-    position: relative;
-    height: 75%;
-    width: 81%;
-    background: black;
-    left: 9.5%;
-    top: 10%;
-    border-radius: 3%;
-    object-fit: cover;
-}
-</style>
-</head>
-<div id="video-outer">
-<video controls preload="auto">
-<source src="<!--{$url|escape:'urlpathinfo'}-->" type="video/mp4">
 </video>
 </div>
-</html>
+<figcaption><b><!--{$caption|escape:'html'}--></b></figcaption>
+</figure>
 </includeonly>