I have an image similar to this one
And I'd like to insert a video in it and keep its ratio when reducing the size of my screen.
Only the width needs to be responsive as it'll be shown in portrait on mobile.
I have no idea how to do that using CSS. I tried using an absolute position and some percentages, but when resizing, the ratios are not really respected and the video becomes smaller
If you can use the open source HTML5 video player, videoJS, it support a 'Fluid' mode which will allow you set a chosen aspect ratio to be maintained when the video resizes.
They provide details including configuration here: https://docs.videojs.com/tutorial-layout.html
An example configuration:
var player = videojs('vid2');
//Set fluid mode
player.fluid(true);
//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');
//Set UI to be responsive
player.responsive(true);
Related
I am making an html webpage with a video in the background and would like to accomplish the following using CSS:
The video keeps its aspect ratio
The video fills the width of the screen
At relatively large window size the whole video is visible
The video has a minimum height (i.e. when the window is shrunk, at a certain size, the whole video is no longer visible).
There are elements positioned directly below the video, dynamically following it if the window is resized
It would also be nice if when the video is invisible it is centered (not crucial).
I've been trying this for ages now and have been able to get most of the points but not all of them; in particular I find the last point (positioning another element directly below) to be hard to combine with the others. I've been using the html video element and CSS.
Is this possible?
You can use a Jquery plugin for this. I recommend looking at this one in particular.
Vide - Jquery Plugin For Fullscreen Background Videos
This question already has answers here:
Common CSS Media Queries Break Points [duplicate]
(13 answers)
Closed 7 years ago.
first off, is there a way I can switch to the 4:3 aspect ratio for testing on Windows? I cant seem to find anything online. My monitor has a 16:9 aspect ratio but my alignment changes using CSS and HTML dont work to good on a screen with a 4:3 ratio. So is there a way to auto-detect aspect ratio and then apply the css/html styles accordingly? And more importantly, can I change my screens aspect ratio to 4:3 for testing? Is that even possible?
I'm aligning some images and other elements using margin/padding/ left/right/top bottom etc but the elements either get cut off or dont show on the screen at all.
thanks
For testing i would recommend using Firefox and use the Responsive Design View. You can find this option under Tools > Web Developer > Responsive Design View. Besides some predetermined resolution sizes you can also modify a custom view in a 4:3 perspective so you can check out the device aspect ratio as mentioned by Jonathan.
I'm developing a flash player and I have a problem with full screen mode because when I make full screen all other elements grow larger. Any idea on fixing this problem?
Check this manual. If you attempt to set stage.scaleMode=StageScaleMode.NO_SCALE and then request its width&height, you can then adjust your player contents to fit into the provided dimensions with proper internal scaling. This will let you control which elements are enlarged, and which will retain their size.
If I have an image that is 600x600 and I want to display it in 100x100 on a mobile device.
Should I resize the image 1st in Photoshop or should I just use width/height attributes (will this method force users to download a large image 1st and then resize it ?).
I know it is possible to resize using JS
The browser can resize images dynamically using CSS, but they doesn't always look as good as doing it in Photoshop. You should resize it for mobile to reduce the file size and bandwidth required.
The image of the card on my site (bottom right) displays differently in Chrome and Firefox. In Chrome, its ratio is preserved, but the ratio is twisted in Firefox.
How can I apply a constant resize of the image itself, cross-browsers (basically do what now happens for Chrome)
You've got the following in your image tag:
width="100%" height="40%"
Try specifying just one of those (I would suggest the width) to maintain the aspect ratio, otherwise the image will be stretched or squished one way or another to fit those dimensions on the less thoughtful browsers.
Ideally you want to avoid allowing the browser to resize the image. Different browsers achieve varying levels of quality which never compare to what you can achieve with a dedicated digital image editor (Photoshop, Paint.NET, etc). Best to resize it to the desired dimensions before publishing then explicitly set the actual height and width in pixels.