If we had a video with a width of 100px and we wanted to figure out what height it would have with a 16:9 aspect ratio, we’d just have to do a little math:Ĭonst height = 100 / (16 / 9) // 56.25 Getting started Those ratios are sometimes inverted on mobile devices when in portrait mode (e.g. Videos are often displayed in standard aspect ratios, such as 16:9, 4:3, or 16:10. (16:9 is the same as saying 1600:900 but reduced to its simplest terms.) screen, video, image) compared to the height.įor example, if a video is 1600px wide and 900px in height, we can say the aspect ratio is 16:9. Generally speaking, the aspect ratio refers to the ratio of the width of an element/display (e.g. What is an aspect ratio?īefore we dive in, let’s clarify what the phrase “aspect ratio” means. If we opened this on a phone in portrait mode, the right side of the video would get cut off. This solution is not ideal for modern websites because it’s not responsive. Let’s say you create the Daily iframe like so: const callWrapper = document.getElementById('wrapper') ĬallFrame = await (callWrapper, ,Ĭreate Daily iframe with 450px by 800px dimensions Daily Prebuilt stays the same size on window resizeīecause absolute units are used here, the iframe will always be 800px by 450px unless we somehow intervene. percentage) which will have a rendered size relative (or dependent) on the parent element’s size. This is in contrast to “relative units” (e.g. Note: “Absolute units” refer to units that are rendered the same size regardless of the window or parent element’s size. Daily Prebuilt fills the container element by defaultĪnother example of when the iframe’s dimensions may cause issues on window resize or on different devices is if you set the dimensions using absolute units (e.g. However, you might find the black bars above and below the video may take up more space than is ideal or maybe you don’t want to show them at all. In some cases, this may be exactly what you want. In the example below, the video fills the parent container, which has a height that is larger than the width. One situation where it may become an issue is if the parent container changes size often or if it is not actually the dimensions you want the video call to be. Another way of saying that “in CSS” is that the width and height properties have a value of 100%.įor the most part, this is a good default to set you probably want the video to fill the available space. Understanding the UI issues we’re trying to solveīy default, the Daily Prebuilt iframe that gets embedded into your app will fill the space available in the parent element.
0 Comments
Leave a Reply. |