This article is based on Iframe, element that makes available to have a website inside of another website, for example. Using Iframe-element makes sometimes sites lot’s of lighter.
So what is Iframe
Iframe is powerful object that basically makes your site lighter and you are able to make another website inside of your own website. For example think this, you need to upload 50 videos that are more than 20 minutes long each of them to your site in one page. Uploading this to visitors browsers takes time so why to concern using Irame
- A) The videos no longer are in that your site so your site more lighter
- B) Uploading videos to video-sharing website, for example to Youtube, makes you well-known. Also you get the Iframe path there to upload to your site.
- C)It’s easy to use and makes your site easier to get to search engines.
How the Iframe works
Basically you need to insert “src” attribute to search content to Iframe. Easiest way is to use absolute path like http://www.google.com or http://www.yahoo.com . Then there are other ways also, if you example Iframe your own video file. Then you input some like this “src=”videos/myvideo.mp4” if the video is one dictionary above your current html-document.
You can also use width and height attributes straight to the iframe context. There is also scrolling attribute to enable bars to move context inside Iframe.
What you need to do
I’m going to give you a samples basically what you are able to do with this. I also so you the code that i used to create this page, note that page is not published but you can preview your code.
So here is the html part
(NOTE! “<“- and “>”-marks aren’t shown here at Iframes because they start working after they are shown in WordPress. Remember put them afterwards)
<!DOCTYPE html>
<html>
<head>
<title> Iframe </title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" text="txt/css">
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="h1">
<h1> Iframe, lots of thinks in one simple way </h1>
</div>
<div id="iframe1">
iframe src="https://tuomastorma.wordpress.com/" width="90%" height="45%" /iframe
</div>
<div id="iframe2">
iframe src="http://maps.google.fi/maps?client=opera&q=ratapihantie+13&oe=utf-8&channel=suggest&ie=UTF8&hl=fi&hq=&hnear=Ratapihantie+13,+00520+Helsinki&t=m&z=14&ll=60.20124,24.93394&output=embed"
/iframe
</div>
<div id="iframe3">
iframe width="300" height="275" src="http://www.youtube.com/embed/-K1q1pw04Bs"
/iframe
</div>
<br>
<br>
<p> To get iframes, simply type the web-address.</p>
<p> There are also irame-syntex in some (Google maps and Youtube for examples) sites so copy and paste them to your code </p>
</body>
</html>
And the css.file
body {background-color:silver;
margin:auto
width:75%;
}
#h1 {margin:auto;
text-align:center;
border:3px dotted lightgrey;
border-radius:45px;
padding:20px;
background-color:teal;
box-shadow:5px 10px 7px 6px grey;
font-size:45px;
color:black;
text-shadow:3px 3px 3px grey;
}
p {font-family: 'Press Start 2P', cursive;}
#iframe1 {
float:left;
position:relative;
padding:5px;
border:2px solid black;
background-color:silver;
margin-top:50;
width:415px;
}
#iframe2 {
margin:auto;
position:relative;
padding:50px;
margin-top:50px;
margin-left:475px;
border:2px solid black;
background-color:silver;
width:275px;
}
#iframe3 {float:right;
padding:50px;
margin-top:-275px;
border:2px solid black;
background-color:silver;
}
Summary
Examples of Iframes.
In that site. there are three Iframes. Left goes to my site, middle goes to Google maps and right one shows Youtube-com video.
Last but not least, let me show you how Iframe works on WordPress.
Here is for you guys that video,
Band -Device , Song -Vilify
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
-Tuomas Törmä
Sources
- Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.
Tuomas Törmä 