iFrame Magic!

[Genesis]

So last night was my first experience with using iFrame code. I was like a kid with a new toy.

Challenge: How to incorporate an external Website page into a Web page. Not illegally of course. What I was trying to do was to incorporate the server status that was generated by an external Website into a Website page. I first tried to copy the java script, code and stylesheet, but it completely destroyed the layout of the page. Then came across the magic of iFrame.

Can't believe it. All it takes is:

<iframe> </iframe>

Then drop in the website name "http:/name.com", the width of the frame,width=X, the height of the frame =Y seamless so it doesn't show any edges and frameborder=0 so it doesn't create a border

<iframe src="http://name.com/" width="698" height="730" frameborder="0" seamless> </iframe>

That was an awesome experience.

So while I was Googling all of this also arrived at this excellent tutorial by Eli the Computer Guy on YouTube, how to copy code to more than one Website. I didn't quite get all of it, but iframe is definitely my new hero :heart:

[video=youtube]

 

[ogah]

how if name.com use frame breaker?

 

[jaran]

You also can be modified it with css style for iframe if you want to make responsive design. Not likes iframe, Im usually using javascript to do it.

 

[Genesis]

how if name.com use frame breaker?

I don't understand this question ogah. Name.com means the website that you want to add to that frame.

---

You also can be modified it with css style for iframe if you want to make responsive design. Not likes iframe, Im usually using javascript to do it.

I tried Java but it messed up the design. I could probably have tried harder, but iframe was just much easier to do. I didn't have to use css style for it. It very easily fit into the existing template. Which is what I wanted.

 

[jaran]

Try this one. Place this code and youtube.js into your html structure.

    <div class="youtube" id="YOUTUBE_ID" style="width: 320px; height: 180px;"></div>
    <script src="youtube.js"></script>

Change YOUTUBE_ID with Youtube ID what as you want. Actually this method is using between iframe script and using image background to make look pretty. The benefit using this is youtube doesnt automatically playing videos. The script also support for mobile device views.

 

[admin]

Just be aware, Iframes are not search engine friendly.

 

[ogah]

I don't understand this question ogah. Name.com means the website that you want to add to that frame.

yup. because you use name.com as src
if the website that you add to iframe use frame breaker, your page will redirected to their page

 

[Genesis]

Thanks Ogah. :good:

 

[seliol]

I love iframes too, I only wish you could choose which part of the source is shown on the top of the iframe!

Other than that, they're extremely handy for placing online forms, or sheets.
Google Drive has an option where it will give you the code to place your frame on your HTML.

1. Publish the document (File -> Publish)
2. Click on the tab: Embed
3. Copy the iframe code
4. Add size tags for your own pleasure

 

[Genesis]

I don't trust Google! What could be more easier than <iframe> </iframe>? All one has to do is "Google" it (pardon the pun) and there are thousands of search results that come up.

PS: Welcome back Seliol. Nice to see you posting! :drinks: