|
|
| Line 3: |
Line 3: |
| == Sample result == | | == Sample result == |
| <div class="poster-gallery"> | | <div class="poster-gallery"> |
| {{#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}}
| |
| </div> | | </div> |
| </noinclude> | | </noinclude> |
|
| |
|
| <includeonly> | | <includeonly> |
| <html>
| |
| <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: 330px;
| |
| 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-wrapper"> |
| <div class="video-outer"> | | <div class="video-outer"> |
| Line 64: |
Line 14: |
| </video> | | </video> |
| </div> | | </div> |
| <p><!--{$caption|escape:'html'}--></p> | | <p class="caption"><!--{$caption|escape:'html'}--></p> |
| </div> | | </div> |
| </html>
| |
| </includeonly> | | </includeonly> |
