No notes defined.
<!-- Default -->
<figure class="videoPlayer">
<div class="videoPlayer-video">
<video class="video" controls poster="../../videos/placeholder/dummy-video.jpg">
<source src="../../videos/placeholder/dummy-video.mp4" type="video/mp4" />
</video>
</div>
<figcaption class="videoPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="videoPlayer-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>
</figure>
<!-- YouTube -->
<figure class="videoPlayer">
<div class="videoPlayer-video">
<iframe src="https://www.youtube-nocookie.com/embed/kg2fwlFsZss?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</figure>
<figure class="videoPlayer{{#modifier}} {{.}}{{/modifier}}">
<div class="videoPlayer-video">
{{#if youtube-id}}
<iframe src="https://www.youtube-nocookie.com/embed/{{youtube-id}}?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
{{else}}
{{#video}}
{{render '@video' (contextData '@videoplayer' this) merge=true}}
{{/video}}
{{/if}}
</div>
{{#if caption}}
<figcaption class="videoPlayer-caption"><span>{{{caption}}}</span>{{#copyright}}<small class="videoPlayer-copyright">{{{.}}}</small>{{/copyright}}</figcaption>
{{else}}
{{#copyright}}
<figcaption class="videoPlayer-caption"><small class="videoPlayer-copyright">{{{.}}}</small></figcaption>
{{/copyright}}
{{/if}}
</figure>
/* Default */
{
"video": {
"poster": "/videos/placeholder/dummy-video.jpg",
"sources": [
{
"type": "video/mp4",
"src": "/videos/placeholder/dummy-video.mp4"
}
]
},
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>"
}
/* YouTube */
{
"video": {
"poster": "/videos/placeholder/dummy-video.jpg",
"sources": [
{
"type": "video/mp4",
"src": "/videos/placeholder/dummy-video.mp4"
}
]
},
"caption": null,
"copyright": null,
"youtube-id": "kg2fwlFsZss"
}
@import "_videoPlayer.styles";
%videoPlayer {
&-video {
border-radius: var(--br);
iframe {
// Fix for Firefox and Chrome
width: calc(100% + .5px) !important;
height: calc(100% + .5px) !important;
}
}
}
%videoPlayer {
@include stack-spacing(component);
&-video {
background-color: $_black;
overflow: hidden;
position: relative;
&::after {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 56.25%; //* 16:9 */
}
.video,
iframe {
@include stack-spacing(0);
position: absolute;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
}
}
&-caption {
@extend %figure-caption;
}
&-copyright {
@extend %figure-copyright;
}
}
.videoPlayer {
@extend %videoPlayer;
&-video {
@extend %videoPlayer-video;
}
&-caption {
@extend %videoPlayer-caption;
}
&-copyright {
@extend %videoPlayer-copyright;
}
}