![]() ![]() The merit is NOT mine as I got the jquery here This is calculated by doing 16 / (9 / 100) = 177.77777778īecause the height and width can never be below 100% but the must remain in the correct aspect ratio the video will always cover the whole viewport. width: 177.77777778vh will set the width in relation to the height of the viewport.This is calculated by doing 9 / (16 / 100) = 56.25 height: 56.25vw will set the height in relation to the width of the viewport.min-height: 100% and min-width: 100% are required to ensure that the height and width are never smaller than that of.left: 50%, top: 50% and transform: translate(-50%, -50%) are required to center the iframe in.This allows use to calculate the width in relation to the height and vica versa: Luckily, in your case you want the video to fit the entire screen so viewport units can be used to calculate the aspect ratio instead of percentages. (Snippet doesn't show video, please see fiddle) The only problem is that in your case the calculation is required for both the horizontal and vertical axis (as we don't know what dimensions the viewport will be) and this trick will not work with left and right padding to get the aspect ratio in relation to the height. Given the video has a 16 : 9 ratio this translates to 9 / (16 / 100) = 56.25. Using the formula B / (A / 100) = C% we can calculate the required percentage for the padding. One way to maintain the aspect ratio of an element is to use the "padding percentage" trick which takes advantage of the fact that top and bottom padding uses the width of the element as the basis for their value. That the iframe always fills the height or width depending on the size of the viewport.This will ensure that no black "padding" is present around the outside of the video That the iframe always maintains the same aspect ratio as its video content 16 : 9.The key to implementing this behaviour is to ensure two things: ![]() I got as far as using the "padding percentage" trick, but this answer's clever use of viewport units is crucial to this working. Similar to Alvaro Menendez's answer, credit needs to go to this answer /a/29997746/3400962 by Qwertman. The thing is that it seems to rescale the video, for bigger sizes only,Ĭan the rescales take effect on every breakpoint? or the vimeo player might rescale by it's own anyway? I'm trying to reproduce a background-size cover for an iframe. Maybe this is a better demo, if you compare to this one, there is not much difference. As I get a cookies same origin error in the snippets result, here is a mirror: ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |