Viewing Full-Width Video
Full-Width Video
|
User: Les C. 10 years ago
|
|
|
Can anyone tell me why the video below isn't displaying full width? Thanks, L C HTML Snippet <video autoplay loop> <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4"> </video> <style> video { width: 100%; height: 314px; } </style> |
|
|
User: Roddy 10 years ago
|
|
|
A video has a width and a height which combine to create the aspect ratio. If you use 100% width you need to give it auto height.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Les C. 10 years ago
|
|
|
--Roddy Thanks for your note. In this instance, the video will be used as an abstract background to a slightly opaque image. I don't need to preserve the original aspect ratio. Here's the code I'm using: <video width="100%" height="314" autoplay loop> <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4"> </video> Also, a jsfiddle: http://jsfiddle.net/LCfiddle/Lvcvpdgw/1/ L C Last edit 10 years ago |
|
|
✔ Best Answer
|
|
|
User: Jumbo T. 10 years ago
|
|
|
Paste this is a HTML Snippet <div style="overflow: hidden; width: 100%; height: 314px;"> <video height="auto" width="100%" autoplay loop> <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4"> </video> </div> It works in Safari and Chrome. Since the video is 500px wide and 600px high, why not use a video with a wider width and a smaller height. Last edit 10 years ago |
|
|
User: Les C. 10 years ago
|
|
|
--Jumbo Thanks. That works! L C |
|
| Post Reply |
| You must login or signup to post. |