Example of CSS3 media query controlling the height of an iframe

In this scenario, you need to use CSS Media query to control the height of the IFRAME: for example, the height of an iframe video on a PC page is different from the height on the mobile Web page. The height of the IFRAME can only be set to a fixed height or a percentage of the div, we can control the height of this div through CSS query, to achieve the IFRAME on the PC and mobile phones at different heights.

First, we add in the style that doesn't define CSS Media query:

The code is as follows	Copy Code
. iframe_height{ height:260px; }

Then, when the width is greater than 1024px, set CSS Media Query:

The code is as follows	Copy Code
@media screen and (min-width:1024px) { . iframe_height{ height:460px; } }

When you refer to an IFRAME, you need to embed it in a Div, and the Div uses the. Iframe_height style and sets the iframe height to 100%, such as:

The code is as follows	Copy Code
<div class= "Iframe_height" > <iframe src= "/embed/xodi4otg5ntky" width= "100%" height= "100%" frameborder= "0" allowfullscreen= "allowfullscreen" ></iframe> </div>

In this way, the high level of IFrame displayed on the PC Web page shows a slightly smaller iframe on the phone.