Search code examples
cssiframeheightfixed-width

Iframe width and Height values


I have copy the code directly from the Site about my iframe which placed directly to my code.However when created a class iframe seems it doesn't read the values from the Class created on CSS but it bring its own size from the code that was bring with it along when i paste it directly to my code. How can i re-size my Iframe so that it can ready directly from the class(CSS)..I have deleted and remove the Height and width and set the size from its class it does not do the changes

This is my iframe code

      <div class="iframe">

            <iframe src="https://sway.com/s/3HuzZFFkT18WUe4M/embed" width="100%" marginwidth="0" height="100px" marginheight="0" scrolling="no" frameborder="no" class="iframee" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen
mozallowfullscreen msallowfullscreen></iframe>

  </div>

my CSS - This width and height have no effects to the code

.iframe {
    height: 100px;
    width: 600px;
    margin-left:auto;
    margin-right:auto;

    }

Solution

  • You are making style changes to the outer div using css class, but the styles to the iframe tag remains the same. You can put css on iframe tag like :

        iframe
        {
            max-height: 200vh;
            height:200px;
        }