div youtube background not scaling as I want. AND is vimeo instead of youtube possible?

[bravewart]

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?