Help with responsiveness

[5traX]

Hello people.

I've built a very simple website, just an HTML5 Video Player and a button below it, but the problem is that I'm unable to make it responsive or anything close to it.

 

The result I need is an HTML5 Video Player in the center, taking about 80% width and 60% height, with a button below it, and when you press the button you get a new video BUT the width and height of the player stays the same.

I'm using Flask with Jinja, and I've been using Bootstrap but now switched to Zurb Foundation since it says it's responsive, but I couldn't get it to be responsive.

I've tried making a video container with no success, most tutorials I've read just talk about making a responsive HTML5 Video Player that scales with the size of the video, which is not what I need.

 

Any help would be appreciated as I've been stuck with this problem for about 3 days now, which is really sad for something simple like this...

 

Best wishes,

5traX.

[Mira Yurizaki]

What you want doesn't really make sense. If you use a relative (percentage) sizing, the element is supposed to scale with the resolution of the browser. If you want the element to remain the same size, it must be fixed.

[5traX]

9 minutes ago, M.Yurizaki said:

What you want doesn't really make sense. If you use a relative (percentage) sizing, the element is supposed to scale with the resolution of the browser. If you want the element to remain the same size, it must be fixed.

 

I probably haven't explained myself well... What I need is a video player on the center of website, with a little button below it that generates new video, and I have already made this, not a rocket science, but I can't get it to be responsive yet fixed.

Problem is, whenever I generate a new video, the size of the player changes according to the video size and then button gets misplaced too, and if I use fixed size with like 500px, it probably won't look same for everyone, and on mobile it is too big if you have lower resolution.

On mobiles it should take about 80% of given width for video player, and only about 50% height so the button can be displayed below it without having to scroll down, but this size should be figured out by website when accessed, and stay fixed throughout session, so generating a new video doesn't change the size of video player.

[Mira Yurizaki]

4 minutes ago, 5traX said:

 

I probably haven't explained myself well... What I need is a video player on the center of website, with a little button below it that generates new video, and I have already made this, not a rocket science, but I can't get it to be responsive yet fixed.

Problem is, whenever I generate a new video, the size of the player changes according to the video size and then button gets misplaced too, and if I use fixed size with like 500px, it probably won't look same for everyone, and on mobile it is too big if you have lower resolution.

If you're using the video tag, there's a "width" and "height" property you can use. It's not part of the styling and hence CSS doesn't work on it.

[5traX]

Just now, M.Yurizaki said:

If you're using the video tag, there's a "width" and "height" property you can use. It's not part of the styling and hence CSS doesn't work on it.

I've tried using both width and height tag, and also tried using CSS, but when I do it in percentage it just changes size every time I generate a new video, seems like if I do it in percentage, it'll take up video size and show 80% of the video width size, not doing 80% of the general width.

[Mira Yurizaki]

After playing around with this, the problem is that the video container will resize itself based on the content. If you need it to be the same size regardless of content, the width and height values have to be fixed. They can't be relative.

 

If you need to have the video player continuously resize itself based on the browser's resolution, you're best option is to use JavaScript to detect a browser resize event and change the width and height of the video container.

[5traX]

Just now, M.Yurizaki said:

After playing around with this, the problem is that the video container will resize itself based on the content. If you need it to be the same size regardless of content, the width and height values have to be fixed. They can't be relative.

 

If you need to have the video player continuously resize itself based on the browser's resolution, you're best option is to use JavaScript to detect a browser resize event and change the width and height of the video container.

I've kinda fixed it using containers and videojs, only having trouble playing the media on the iOS for now, but I'll deal with that on my own.

Thanks a lot for helping!