The iframe is in absolute position and as it’s height and width is set to 100%, it is taking the whole area of the image. Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
Make iframe responsive full#
For the image, we have set display: block and width: 100% which is making the image as block element and it’s taking the full width of the container. We will be using a basic React app using create-react-app and in it, we will render an iframe. responsive-video div doesn’t have any height and width declared in CSS. That gives us fluid width with a reasonable height we can count on. With this technique, we have to wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. There are two techniques that can solve the issue. Modify your markup as follows, by simply changing the URL parameter using. To make embedded content responsive, you need to add a containing wrapper around the iframe. You will also notice that the iframe includes width and height attributes. Step by step guide to make your video/iframe responsive using CSS or transparent imageĪs it’s an era of responsive web design, once we add a video on a web-page, specially when it is inside an iframe, a challenge comes up to make it responsive. Within the iframe includes a URL pointing to the source of the embedded content.
0 kommentar(er)
