CODEWITHSUNDEEP
htmlwordpressiframeblogs
Shiloh Janowick
Shiloh Janowick

Reputation: 23

Iframe fit to screen

I am trying to integrate my blog into my website via iframe. However, using this method I have to give the height and width in pixels. I want the blog to fit the screen, though. Is there any way to do this?

EDIT: The answer below suggests that I change my CSS. Then what do I do with the "width" and "height" variables in my html? Here is the full html code of the page.

<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<title>Shiloh Janowick's Blog!</title>
	<link rel="shortcut icon" href="pics/favicon.ico" type="image/x-icon">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
</head>

<body>

	<iframe width="" height="" src="http://shilohgameblog.wordpress.com" frameborder="0" allowfullscreen></iframe>

</body>

</html>

I left the width and height unspecified because I have no idea what to put in them afterwards.

Upvotes: 2

Views: 13017

Answers (3)

Tiffany M.
Tiffany M.

Reputation: 40

Yes, to get full screen use this code on your css:

html, body, div, object, iframe, fieldset { 
    margin: 0; 
    padding: 0; 
    border: 0;
}

EDIT: Including that on your CSS at the end your html code has to be like this:

<iframe src="http://shilohgameblog.wordpress.com"></iframe>

You need to take off everything else on the HTML code because you already put that on your CSS

Upvotes: 0

vitralyoz
vitralyoz

Reputation: 618

Try this one . It works great for me.

    body {
        margin: 0;
        padding: 0;
    }

    iframe {
        display: block;
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0 none;
        box-sizing: border-box;
    }

Upvotes: 2

Calum Childs
Calum Childs

Reputation: 337

If you want to make an iFrame the width of the page (so it's responsive) all you need to do is this:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/ENTERVIDEOID" frameborder="0" allowfullscreen></iframe>

I've done this with a YouTube video, but you can do this without interfering with anything else. You can also change the height to 100%.

Upvotes: -2

Related Questions