I am working with an HTML5 template that supports youtube video backgrounds in a DIV.
When I scale the browser window to see how the responsivnes behaves, I notice that the videos crop left/right, top/bottom, depending on the aspect ratio of the DIV.
For my purposes, I would need the videos only crop on the right and top only, so that the bottom left is always visible.
As I am not a pro I have been doing a lot of trial and error on this, but cannot get it working.
I actually need to have two classes available. One where the video scales from the bottom left and one where it scales from the top right corner. I don't quite understand if I need to create two new classes for "videobg" AND "youtube-background" respectively? That would be "videobg-bl, videobg-tr, youtube-background-bl, youtube-background-tr". Or is just one of those classes responsible for the scaling?
This is the HTML snippet I use in the template:
<div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0">
<div class="youtube-background" data-video-url="https://www.youtube.com/watch?v=ekthcIHDt3I"></div>
<div class="background-image-holder"> <img alt="image" src="img/dancer-1A.png"> </div>
</div>
and these are the CSS classes for videobg and youtube-background:
.videobg {
background: #252525;
position: relative;
overflow: hidden;
}
.videobg .container,
.videobg .background-image-holder {
opacity: 0;
transition: 0.3s linear;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
}
.videobg .background-image-holder {
opacity: 0 !important;
}
.videobg.video-active .container {
opacity: 1;
}
.videobg.video-active .loading-indicator {
opacity: 0;
visibility: hidden;
}
.videobg video {
object-fit: cover;
height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: 0 !important;
left: 0;
}
@media all and (max-width: 1024px) {
.videobg .background-image-holder,
.videobg .container {
opacity: 1 !important;
}
.videobg .loading-indicator {
display: none;
}
.videobg video {
display: none;
}
}
.youtube-background {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 0 !important;
}
.youtube-background .mb_YTPBar {
opacity: 0;
height: 0;
visibility: hidden;
}
@media all and (max-width: 1024px) {
.youtube-background {
display: none;
}
}
Also, the template is using ytplayer.min.js for the youtube backgrounds.
Unfortunately, the player shows branding watermarked elements during the first 2-3 seconds of the clip, that I have no idea how to get rid of. I also have all my clips on vimeo, so it would be so much more convenient to be able to use vimeo backgrounds instead. Is there a simple way to do this, without breaking the above CSS?