Widget:Video: Difference between revisions

From The Midnight Wiki
No edit summary
No edit summary
Line 2: Line 2:


== Sample result ==
== Sample result ==
{{#widget:Video|url=/images/4/46/SheWasDreaminOfBoys.mp4}}
 
{{#widget:Video|url=/images/8/84/EarlyEndlessSummer.mp4}}
</noinclude>
</noinclude>


Line 10: Line 9:
<head>
<head>
<style>
<style>
  #video-outer {
  .video-outer {
     background-position: center;
     background-position: center;
     background-size: contain;
     background-size: contain;
Line 25: Line 24:
     z-index: 1;
     z-index: 1;
}
}
.infobox #video-outer {
.infobox .video-outer {
width: 300px !important;
width: 300px !important;
     height: 273px !important;
     height: 273px !important;
Line 31: Line 30:


  @media screen and (max-width: 1400px) {
  @media screen and (max-width: 1400px) {
     #video-outer {
     .video-outer {
         width: 329px;
         width: 329px;
         height: 300px;
         height: 300px;
Line 37: Line 36:
}
}


#video-outer video {
.video-outer video {
     position: relative;
     position: relative;
     height: 75%;
     height: 75%;
Line 53: Line 52:
</style>
</style>
</head>
</head>
<div id="video-outer">
<div class="video-wrapper">
<div class="video-outer">
<video controls preload="auto">
<video controls preload="auto">
<source src="<!--{$url|escape:'urlpathinfo'}-->" type="video/mp4">
<source src="<!--{$url|escape:'urlpathinfo'}-->" type="video/mp4">
</video>
</video>
</div>
<p><!--{$caption|escape:'urlpathinfo'}--></p>
</div>
</div>
</html>
</html>
</includeonly>
</includeonly>

Revision as of 16:31, 25 June 2023


Sample result