html <object> being clipped although height=100% - html

I am using the following code to embed a pdf in a webpage:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>
However the embedded document will be clipped as the height will be set to a value that wil clip the object. Forcing size in pixels will fix the problem. How is that?
Make you tests here as jsfiddle will fail to deal with <object>

The page itself needs a size assigned to it.
set the style appropriately for your page.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{height: 100%;width: 100%}
</style>
</head>
<body>
<object data="http://fluencycontent-schoolwebsite.netdna-ssl.com/FileCluster/StGeorgesBritishInternational/Mainfolder/Admissions/1407-Application-Form_Admissions.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="26"><p>This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p></object>
</body>
</html>

Related

Two <iframe> in same html file isn't working properly

I tried to add two local html file (as frame, inside one html code) in two different iframe, but its not working. Output showing the same html file in both frame.[I guess, screenshot will help to understand my problem]
Here my html code.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Frame1:</h1>
<iframe src="frame1.html" frameborder="1" width="100%" height="250px" name="frame1">
</iframe>
<br /><br /><br />
<h2>Frame 2:</h2>
<iframe src="frame2.html" frameborder="1" width="100%" height="250px" name="frame2">
</iframe>
</body>
</html>
frame1.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>This is a separate frame than others</h2>
</body>
</html>
frame2.html file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>Frame 3:</h3>
<iframe src="" frameborder="1" width="90%" height="180px">
</iframe>
</body>
</html>
Screenshot, describing my problem
I just try copy pasting your code in 3 different file in same folder, and i got what you need to have
Maybe this is a cache problem. Have you try to clear your cache browser?

Hide "!DOCTYPE html" in iframe

We managed to embed a html-table with iframe. At the very top of the table you can read "!DOCTYTE html". What do I have to include in the iframe-command that this "!DOCTYTE html" doesn't show up anymore?
My code so far:
<iframe src="http://test/positiveFaelle.html" scrolling="no" seamless="seamless" frameBorder="0" width="900" height="485"></iframe>
The result:
It's a problem with your test/positiveFaelle.html file.
The content should look something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If in your file you have <!DOCTYPE html> it wont work.
Hope this helped.

content at after youtube iframe not shown

I want to show youtube video in html. For that i am using iframe. But the content at after iframe is not showing.
this is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<p>Content of the document......</p>
<h3>1 Microsoft And Google Collaborate On Angular 2 Framework, TypeScript Language</h3><div><p><span class="embed-youtube"><iframe class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/videoseries?list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7&hl=en_US" frameborder="0" allowfullscreen="true"/></span></p></div>
<p>END END</p>
</body>
</html>
In this code "END END" not showing at after the youtube iframe
You need to close the iframe tag properly. Currently you close it
inline, but this is not the correct way. Do:
<iframe ..></iframe>

seamless attribute not working html5

The seamless attribute doesn't seem to be working in my iframe but the frameborder is I am not sure why? I am working in html5. Even on the W3schools tutorial the seamless example still has a border so I am not sure what it is supposed to do. I thought that frameborder doesn't work in HTML5 so that is strange that it's working in mine.
Here is my code:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fly to the Limit</title>
<link rel="stylesheet" href="../assets/stylesheet.css">
</head>
<div class="mainInfo">
<iframe seamless src="about.html" id="iframe" name="iframe" scrolling="no"
frameborder="0"></iframe>
</div>

tags below video tag not visible

I am learning html5 and I write this simple snippet of code:
<!DOCTYPE html>
<html>
<head>
<title>test video</title>
</head>
<body>
<video src="movie.webm" controls/>
<h1>this is a header below the video</h1>
</body>
</html>
The video is shown fine on the screen but the problem is that I am not able to view the <h1> tag below the video. I have tested in Opera and Firefox. Do you have any idea what I am missing here?
You need to explicitly close the <video> tag:
<body>
<video src="movie.webm" controls></video>
<h1>this is a header below the video</h1>
</body>
Here's an example. Notice how the first header is displayed, and the second is not.
And just for completeness, here's what the spec has to say:
Tag omission in text/html:
Neither tag is omissible.

Categories