These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc. It does not store any personal data.Īnalytical cookies are used to understand how visitors interact with the website. The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies.

The cookie is used to store the user consent for the cookies in the category 'Performance'. This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category 'Other. The cookies is used to store the user consent for the cookies in the category 'Necessary'. The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category 'Functional'. The cookie is used to store the user consent for the cookies in the category 'Analytics'. Set by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the 'Advertisement' category. This cookie is set by the Google recaptcha service to identify bots to protect the website against malicious spam attacks. These cookies ensure basic functionalities and security features of the website, anonymously.Ĭloudflare sets this cookie to identify trusted web traffic. Necessary cookies are absolutely essential for the website to function properly. Responsive iframe using aspect-ratio property (the proper way) by StreamShark ( CodePen.

The following is an example using this new property with fallback on CodePen. However, should you wish to have legacy support, we could use the feature of CSS and pseudo-element tactic to add the aforementioned padded-box method as fall-back for older versions of browsers. Needless to say, this is the long-waited, simplest, cleanest, non-hacky, proper native way of setting aspect ratio on elements. Please stop looking at IE, you are embarrassing it. This is achieved with a singular CSS property.Īlthough it is still in Working Draft at the time of this writing (November 2021), it has already been widely adopted by the latest version of most modern browsers. As the name indicates, it lets you set the aspect ratio of an element and maintains it automatically when the element shrinks or grows. Method 2: Responsive iframe using aspect-ratio property (the proper way)Īnother way is to employ one of the latest and most welcomed additions to the CSS specification that is aspect-ratio.

Iframe responsive