2
To fit the video on the screen of a mobile application, I made the sequinte, I put the width screen size video, I put margin-top negative for the half of what’s left of the container to adjust the center, and I put a overflow: hidden not to appear the rest of the video, will cut the video a little, or a lot, but no problem. Alias the only problem is that the control of the video is below, and as I cut part of it, then does not appear:
<div style="height: 500px; position: relative; overflow: hidden; width: 375px; border-style: dashed">
<video controls src= "https://d2rrsmhcfsezix.cloudfront.net/videos/_fa9421ef08f88170ac649e3c89bf39861833e473.mp4" style="margin-top: -120px; position: absolute; width: 100%">
</video>
</div>To show the controls just take the overflow, but then the video straddles the preset screen.
<div style="height: 500px; position: relative; width: 375px; border-style: dashed">
<video controls src= "https://d2rrsmhcfsezix.cloudfront.net/videos/_fa9421ef08f88170ac649e3c89bf39861833e473.mp4" style="margin-top: -120px; position: absolute; width: 100%">
</video>
</div>Is there any way to change the position of the video control, for example to respect the bottom of the parent container?
If you want to redo the player here is a very interesting article https://www.adobe.com/devnet/archive/html5/articles/html5-multimedia-pt3.html
– hugocsl
Can’t cut the top of the video and show the controls?
– Sam
Another thing: why don’t you adjust the whole video within the area without making cuts?
– Sam
The hint and centering the video on the screen, if I just cut from the top, it will look weird. If I don’t make the cuts and center will be white sides on the side, which in Desgin’s matter, at least I think, will get worse visually.
– Vinicius Morais
You could adjust the video inside the div and put a background in the div so it wouldn’t be blank sides. Type as Youtube does when the video width is smaller than the area. Maybe a black or dark gray background.
– Sam