Play YouTube - Vimeo about vidage

[dvlden]

I tried this morning to implement Vimeo, but I don't like the idea of iframed video. I don't mind adding a little bit more of CSS, but for some reason I can't figure out how to make it keep full width and height and not show that black background on the sides when there's not enough width.

I found this link:
https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761

It allows us to add vimeo as you'd normally implement HTML5 video. So that way you can use it with Vidage immediately. However, I can't figure out what are all those params. Seems like oauth2 token is not required at all tho.

I'll keep looking into it...

UPDATE 1:
Seems like the URL that I've found is only for Vimeo Pro users. Well at least it's something.
If I find a way to have iframe as background cover without use of JS calculations on resize, I will surely implement it.

[polikin]

You can try something like this:

.video-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.video-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.video-container-4x3 {
  padding-bottom: 75%;
}

.video-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

[dvlden]

Nope, already tried something like that. Here's one demo tho of your code:
JSFiddle

It should not resize the video on the browser resize (in this case output column resize). It should always be full width and height of container but without ruining it's aspect ratio.

[dvlden]

I did some research about this. Seems like Vimeo has officially created their API as modules which I can surely implement in Vidage. But YouTube on the other side, does not have it officially as module, but by third-party only. 😞

If I decide to do this, I'd need to rewrite Vidage logic a bit and have core functionality in one and all other possibilites as separate modules:

• html5 video
• vimeo video
• youtube video

Although I am not sure if I should compile them all in the end as one file or let the user decide which video player he'd like to use and that way keep the files as small as possible. Suggestions?

I had plans to keep Vidage as small as possible, but I've been considering implementing YouTube for a while. It just bothers me that they did not create their API as modules. So I'll think about it when I get time, thanks for your suggestion!

[polikin]

I don't think that compile them all in the end as one file will increase the size a lot.

[polikin]

Maybe you can try to play with height: 100vh and width: 100vw to have iframe as background cover without use of JS.

[dvlden]

Not working, same as fixed or absolute position with all sides set to 0 or w and h set to 100%.
Aspect Ratio is being kept on resize and then black edges are shown.

[dvlden]

I still did not find a solution of using <iframe /> without JS handling aspect ratio. Anyone?
If that's not possible, this won't be developed by me.