0

I have an owl-carousel with a three-part slider.

I want to cover the entire area of the slider item with the video. Notice the black borders on the sides of the video in my code pen.

My codepen is: https://codepen.io/the_man_coding_machine/pen/oNNKVXP?editors=1111

I found this Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3 and I tried to implement the same but doesn't seem to make it work. AS par details in blog I just have to set a height/width of the carousel item and it should work. But It doesnt... Their codepen example I was trying to implement is this : https://codepen.io/anon/pen/zRVLGJ

Specifically I was trying very hard to work with this:

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}

Can someone help me to make the video larger so there is no letterbox and it fills with the height and width of the box?

Also, in the example above, when I hover over the video it hides the title (youtube title bar) and I'd like if you could help me with that as well.

Sarvesh Mahajan
  • 914
  • 7
  • 16
PHP-Guy
  • 1
  • 5
  • With iframe, you cannot fill the black portion with video as it maintain it's aspect ratio. Rather you can go for youtube video in the background for each slide using tubular JS and do the changes accordingly – KKGupta Dec 09 '19 at 19:39
  • @KKGupta please see "their code pen example" above, he does it just fine by adjusting aspect ratio. Change the iframe youtube link to any video of your choice and you'll see you don't see the normal youtube branding and title bars etc. Resizing the screen also work fine – PHP-Guy Dec 09 '19 at 19:56

0 Answers0