Responsive YouTube Iframe

Responsive YouTube Iframe

source code available


Responsive Iframes
Create an iframe that will keep the aspect ratio (4:3, 16:9, etc.) when resized.

What is aspect ratio?
The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television, and for YouTube videos).

How To - Responsive Iframes ?

Step 1) Add HTML:
    Use a container element, like div, and add the iframe inside of it.
Step 2) Add CSS:
    Add a percentage value for padding-top to maintain the aspect ratio of the container DIV. The following example will create an aspect ratio of 16:9, which is the default aspect ratio of YouTube videos.

Source Code

Copy and Paste On Code Editor




<html lang="en">
<!-- Code By Ebadallah IT -->
<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Document</title>
</head>
<body>
    <style>
        .container{
            position:relative;
            width: 100%;
            overflow:hidden;
            padding-top: 56.25%;/*aspect ratio 16:9*/

        }
        .responsive{
            position: absolute;
            top: 0%;
            bottom: 0%;
            left: 0%;
            right: 0%;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
    <div class="container">
        <iframe class="responsive" src="https://youtube.com/embed/7rWtvLi9nAM"></iframe>
    </div>
    <p>Developed by Ebadallah IT</p></body>
</html>

Comments

Post a Comment