Scale Iframe tag to Bigger Size

twinlio020202 0
Viewed 15

I have a problem with my iframe! How can I make the content of the iframe fill the screen?

Thank you in advance.

Photos:

Current Output

Wanted Output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div>
        <iframe src="http://octopi/webcam/?action=stream" style="position:absolute; width:100%; height:100%; overflow:hidden">
            Your browser doesn't support iframes
        </iframe>
    </div>
    
</body>
</html>
iframe css html
2 Answers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div>
        <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0" style="width:100%; height:100vh; overflow:hidden">
            Your browser doesn't support iframes
        </iframe>
    </div>
    
</body>
</html>

You can use this: height:100vh

Mecit Yücetürk0

  1. First set margin: 0; padding: 0; for all using *{} universal selector so that everything fits to screen. Note: It's a reset CSS code so it might effect other designs if not handled carefully

  2. Then set width:100%; height:100vh; overflow:hidden for iframe. Here vh means view height

  3. Set border: 0 solid transparent; to iframe to remove border. Note: if you want to keep border then subtract the thickness of borders from width and hight using calc() function of CSS

Then your iframe will fit to screen!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div>
        <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0">
            Your browser doesn't support iframes
        </iframe>
    </div>
    
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      iframe{
        width:100%;
        height:100vh;
        overflow:hidden;
        border: 0 solid transparent;
      }
    </style>
</body>
</html>

Hind Sagar Biswas0
Related