iframes not the same size even though width and height are

Question

I have uploaded data via a database in mysql I have stored the iframe in the database as link however when I display this some of the iframes are coming up smaller then the others. Here is the css for storing the div;

#docs {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
}

/* Your styles for the iframe */
#docs iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Here is the code for displaying the iframe it is $docs['link'] in this case;

<?php
  require_once('database.php');
  if(!empty ($_GET['id'])){
    $id = intval($_GET['id']);

      try{
        $result = $conn->prepare('SELECT * FROM documentaries WHERE id = ?');
        $result->bindParam(1,$id);
        $result->execute();

      }catch(Exception $e){
        echo $e->getMessage();
        die();
      }

      //stores 1000 array of films in $films
      //different method fetch
      $doc = $result->Fetch(PDO::FETCH_ASSOC);
      if($doc == FALSE){
        echo 'sorry a doc could not be found with the id provided';
        die();
      }
  }




?>

<!DOCTYPE html>
<html>
  <head>

      <meta charset="utf-8">
      <title>Tom Turner - Director of Photography</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>
  <body>
    <header>
      <a href="index.php" id="logo">
        <h1>Tom Turner</h1>
        <h2>Director of Photography</h2>
      </a>
      <nav>

          <ul>
            <li><a href="index.php" class="selected">About</a></li>
            <li><a href="/portfolio.php">Portfolio</a></li>
            <li><a href="/contact.php">Contact</a></li>
          </ul>

      </nav>
    </header>

    <div id="wrapper">


            <h1 id="h">
                <?php
                    echo $doc['title'];
                ?>
            </h1>


        <div id="docs">
            <?php
                if($doc['id'] != 5){
                    echo $doc['link'];
                }else{
                    echo $doc['link'];
                    echo $doc['link2'];
                    echo $doc['link3'];
                }
            ?>
        </div>
        <div id="role">
            <p>
                <?php
                    echo $doc['role'];
                ?>
            </p>
        </div>

        <div id="length">
            <p>
                <?php
                    if($doc['id'] == 1 || $doc['id'] == 2){
                        echo $doc['length'];
                    }
                ?>
            </p>
        </div>

        <div id="prod_desc">
            <p>
                <?php
                    if(is_null($doc['production_credit'])){
                        echo $doc['description'];
                    }else if(is_null($doc['description'])){
                        echo $doc['production_credit'];
                    }else{
                        echo $doc['production_credit'];
                        echo '<p>'.$doc['description'].'</p>';
                    }
                ?>
            </p>
        </div>



    </div>

     <footer class="main-footer">



        <div id="footer-notes">
          <p>Tom Turner - Director of Photography</p>
          <p>&copy; Tom Turner - All Rights Reserved</p>
        </div>
       <div id="mayur">
          <p>&copy; 2015 Website by <a href="https//:www.mayurpande.com">Mayur Pande</a></p>

        </div>

        <div class="social-media">
          <ul>

              <li><a href="mailto:tom@allritesreversed.co.uk"><img src="img/mail_circle.png" alt="Email Logo" /></a></li>
              <li><a href="https://www.facebook.com/tom.turner.397501?fref=ts"><img src="img/fbcircle.png" alt="Facebook Logo" /></a></li>
              <li><a href="https://vimeo.com/user6107855"><img src="img/vimeo_circle.png" alt="Vimeo Logo" /></a></li>
              <li><a href="https://twitter.com/intent/tweet?screen_name=mayurpandeuk"><img src="img/twitter_circle.png" alt="Twitter Logo" /></a></li>

            </ul>
          </div>
      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      <script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/responsivemenu.js"></script>

  </body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Mayur Pande

Mayur Pande

iframes not the same size even though width and height are

Mayur Pande

Mayur Pande