|
|
(43 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <noinclude>__NOTOC__ | | <noinclude>__NOTOC__ |
|
| |
| == Sample result == | | == Sample result == |
| | {{#widget:Video|url=/images/4/46/SheWasDreaminOfBoys.mp4|caption=She Was Dreamin' of Boys}} |
| | {{#widget:Video|url=/images/8/84/EarlyEndlessSummer.mp4|caption=Early Endless Summer}} |
| | </noinclude> |
|
| |
|
| </noinclude>
| |
| {{#widget:Video|url=/images/4/46/SheWasDreaminOfBoys.mp4}}
| |
| {{#widget:Video|url=/images/8/84/EarlyEndlessSummer.mp4}}
| |
| <includeonly> | | <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;
| |
| }
| |
| | |
| #video-outer video:fullscreen, #video-outer video:-webkit-full-screen {
| |
| object-fit: contain !important;
| |
| }
| |
| </style>
| |
| </head>
| |
| <div id="video-outer"> | |
| <video controls preload="auto"> | |
| <source src="<!--{$url|escape:'urlpathinfo'}-->" type="video/mp4"> | |
| </video> | | </video> |
| </div> | | </div> |
| </html> | | <figcaption><b><!--{$caption|escape:'html'}--></b></figcaption> |
| | </figure> |
| </includeonly> | | </includeonly> |
Latest revision as of 10:39, 15 December 2023
Sample result