Thu, 2021-01-21 22:19
I am trying to use the four media queries shown below to change the size of an iframe containing a video but it's not quite working as expected. Only the smallest and the largest size options are being displayed. Why are the other two settings being ignored?
@media screen and (max-width: 767px) { iframe { width: 410px !important; height: 231px !important; } } @media screen and (min-width: 767) and (max-width: 800px) { iframe { width: 550px !important; height: 310px !important; } } @media screen and (min-width: 800) and (max-width: 850px) { iframe { width: 700px !important; height: 395px !important; } } @media screen and (min-width: 850px) { iframe { width: 955px !important; height: 539px !important; } }
Fri, 2021-01-22 14:33
#1
I have now found a totally
I have now found a totally different and much better solution for resizing an iframe.
<a href="https://www.w3schools.com/howto/howto_css_responsive_iframes.asp"></a>
However, it would still be interesting to find out why two of my original CSS media queries didn't work. The associated html code was as follows.
<iframe ID="MyVideoFrame" runat="server" src="https://xxxxxxxxxxxx" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen ></iframe>
Tue, 2021-01-26 02:48
#2
Responsive sizing
The last code block, @media screen and (min-width: 850px) {…}, is the default. No need for that at all. Set your break points by reducing your window width to the point where things, um, break. Read the width in pixels and divide by your default font size; that's EMs. Write your code block, save and refresh the page in your browser. Rinse and repeat until there's no point in going further.
Otherwise, base the other blocks on max-size and leave min-size off. Also kick the !important to the curb. If you need to use the override method, you have conflicting properties and should seek them out and correct them. Especially bad is that it overrides the users' config files. In that vein, the use of pixel metrics just make a mess of things. Use EM metrics, since it is based on user preferences.
gary
Tue, 2021-01-26 13:10
#3
Hi Gary, Many thanks for your
Hi Gary,
Many thanks for your detailed response, which prompts a few questions.
The last code block, @media screen and (min-width: 850px) {…}, is the default. No need for that at all.
I don't really understand what you mean here. My personal choice of 955 x 539px is specified in that code block. If that block is deleted where else is such a setting defined?
Set your break points by reducing your window width to the point where things, um, break. Read the width in pixels and divide by your default font size; that's EMs. Write your code block, save and refresh the page in your browser. Rinse and repeat until there's no point in going further.
I didn't previously know any way to find the current width of my browser window, but your post prompted me to find a solution at <a href="https://www.webfx.com/tools/whats-my-browser-size/" rel="nofollow">https://www.webfx.com/tools/whats-my-browser-size/</a>.
I must confess that I have been ignoring EMs for a long time. The W3Schools website defines the EM as 'Relative to the font-size of the element (2em means 2 times the size of the current font)', a definition that makes no mention of screen width. I am therefore struggling to understand what you meant by 'Read the width in pixels and divide by your default font size; that's EMs'. Please clarify.
Otherwise, base the other blocks on max-size and leave min-size off.
Are you saying that the browser will automatically use the media query with the highest max-size that fits the current width? Are there ever situations when specifying both max-size and min-size does serve a useful purpose?
Also kick the !important to the curb. If you need to use the override method, you have conflicting properties and should seek them out and correct them. Especially bad is that it overrides the users' config files. In that vein, the use of pixel metrics just make a mess of things. Use EM metrics, since it is based on user preferences.
I only used !important because another online source of guidance said that it fixed some potential problems with media queries. However, as my perceived problems still remained, that setting was probably irrelevant and served no useful purpose.