I'm building a webapp designed for iDevices to be used in combination with the school website. I'd like to have one section of the webapp have an embedded clip of the school website. Typically I'd use something like this, and be done with it:
<object data=http://www.schoolwebsite.org width="600" height="400"> <embed src=http://www.schoolwebsite.org width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>
But that won't responsively, and account for rotation of an iPad or utilization of a different platform.
How would I edit that code, or create new code to embed an existing webpage within another webpage?
The tag you are looking for is iframe:
<iframe src = "http://www.example.com" />
This shows the webpage specified in the page that the code is in.
You can also customize it if you want, specifying the border in the style:
<iframe src = "http://www.example.com" style = "border: 1px solid" />
Replace 1px with the size of the border.
Also in the style tag, you can specify the size, or you can just specify the width: and height properties.
try an iframe:
<iframe src="http://www.schoolwebsite.org" style="border:1px black solid;" name="frame" scrolling="auto" frameborder="0" align="top" height="400px" width="600px">
</iframe>
Related
I have a base url <base href="https://www.example.com/" target="_self"> for my page's relative links.
The problem is, it's affecting the src="" of an external iframe am trying to embed.
<iframe width="600" height="300" frameborder="0" src="https://external-example.to/something/widget?width=600&height=300¬e="></iframe>
Other iframes loading content from the my domain https://www.example.com/ are working just fine.
Forexample <iframe width="600" height="300" frameborder="0" src="https://www.example.com/something/some-thing"></iframe> is not affected.
The base url if forcing it's value on the src value of the external iframe like this
<iframe width="600" height="300" frameborder="0" src="https://www.example.com/https://external-example.to/something/widget?width=600&height=300¬e="></iframe>
How can I avoid this https://www.example.com/https://external-example.to/something/widget?width=600&height=300¬e= from happening?
Thanks.
I'm trying to set up a website to display a twitch channel. For this, I embedded the channel, and the chat. I also put the logo. However, because the chat reaches down farther than the player, the logo can't go directly below the player. I know you could allow the logo to go below with tables, but those are a big headache, so I was wondering if there was another way to put the logo directly below the player. Website: https://katamonia--449243.repl.co/
<!DOCTYPE html>
<html>
<head>
<title>Katamonia</title>
</head>
<body style="background-color:#333">
<center>
<iframe align="top" src="https://player.twitch.tv/?channel=katamonia" frameborder="0" allowfullscreen="true" scrolling="no" height="582" width=74%>
<iframe frameborder="2"
scrolling="no"
src="https://www.twitch.tv/embed/katamonia/chat"
height="100"
width="100">
</iframe>
<iframe src="https://www.twitch.tv/embed/katamonia/chat?darkpopout" frameborder="0" scrolling="yes" height="758" width=24%></iframe>
</center>
</br>
<img align="top" src="https://static-cdn.jtvnw.net/emoticons/v1/778094/2.0" height="200" width="200">
</body>
</html>
So you forgot to close the first <iframe> tag with </iframe>. Then you can wrap different contents with <div></div> containers to create a clear structure and add proper alignment. I made a fiddle for you that shows you how you could do it:
https://jsfiddle.net/NicolasDurant/xp9wf8t6/
It also would be great, if you can extract your stylings out of your HTML file into a seperate CSS file, so you have all the stylings in one place.
There are alot of possibilities to align containers. I used flexbox. Here is a complete guide about that: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One of the most used libraries for arrangement and default components is bootstrap, you should give it a try:
https://getbootstrap.com/
I am trying to embed a PDF on a web page, but it isn't showing up. This is the code:
<object type="application/pdf" data="http://www.sunshinesam.com/v/vspfiles/downloadables/Father'sDayPrintable2015.pdf" height="600" width="400">Father's Day Printable 2015</object>
What do I need to change to make it work? Thanks!
A pure, non-javascript way to this would be to do exactly what you're doing now, but add a link. Some thing like
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>Alternative text - include a link to the PDF!</p>
</object>
I'm using the <object> tag to display a website in my website (instead of <iframe>).
<object id="iframe" type="text/html" data="http://website.com"></object>
The problem is that if the website in the <object> redirects, my own website will be redirected.
I do not have this problem with <iframe>. Ideas?
Try this. It is working.
<object width="400" height="400" style="border:1px solid red;" data="http://php.net" type="application/html" archive="http://php.net">
example
I've been working on having multiple pdf documents inside a single html page using iFrames. I figured how to insert pdfs inside iFrames but I've been curious if it's possible to add a pdf to an iFrame while showing all the pdf pages; that is, the iframe should display all the pdf content without a vertical scroll bar.
Thanks, Y_Y
<iframe src="mydoc.pdf" width="100%" height="800px"></iframe>
I don't think you can show all pages, unless you make the height property large enough to show all pages. You would have to make the height big enough (proportionally) to show all pages based on the width of the iframe.
IFRAME
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Object
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>