|
|
| (31 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|caption=She Was Dreamin' of Boys}}
| |
| {{#widget:Video|url=/images/8/84/EarlyEndlessSummer.mp4}|caption=Early Endless Summer}}
| |
| <includeonly> | | <includeonly> |
| <html> | | <figure class="video-wrapper"> |
| <head>
| |
| <style>
| |
| .video-wrapper {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| }
| |
| .video-outer {
| |
| 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;
| |
| 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 class="video-wrapper">
| |
| <div class="video-outer"> | | <div class="video-outer"> |
| <video controls preload="auto"> | | <video id="content-video" controls> |
| <source src="<!--{$url|escape:'urlpathinfo'}-->" type="video/mp4"> | | <source id="video-source" type="video/webm" src="<!--{$url|escape:'urlpathinfo'}-->" > |
| </video> | | </video> |
| </div> | | </div> |
| <p><!--{$caption|escape:'html'}--></p> | | <figcaption><b><!--{$caption|escape:'html'}--></b></figcaption> |
| </div> | | </figure> |
| </html> | |
| </includeonly> | | </includeonly> |
