I need to have a flash intro for my website (a requirement from my teacher). I created the intro and embedded it into my page. I takes up the entire screen in both Chrome and Chromium. In IE8, Firefox and Opera the size is incorrect. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="3; url=template.htm">
<meta charset="UTF-8">
<title>Com Tech Projects | Jason Cook</title>
</head>
<body style="background: black;">
<embed style="height: 100%; width: 100%;" src="Flash/Introv6.swf"/>
</body>
</html>
Try to use
<style>
html,body{height:100%;padding:0px;margin:0px;background-color:black;}
</style>
instead.
In the HTML5 doctype, the parent element must also have % values defined for a child element to use % values. So in the CSS for your body tag:
body {
height: 100%;
width: 100%;
}
Then it should work.
If you want it fullscreen, write the following:
<video style="position: absolute; height: 100%; width: 100%;">
<embed style="position: absolute; height: 100%; width: 100%;" src="Flash/Introv6.swf"/>
</video>
If that does not work, consider the use of the <object> tag instead of <embed>.
Related
I am using the embed tag to display a pdf file. It works perfectly, except for the fact that the "height" property won't work when I define height with % ("width" does what it's supposed to do). It works when I use px instead of %, and I have tried changing the numbers, but none work... Does anyone have any clue why?
Thank you!
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<embed id="pdf" src="C:\path\Tysk.pdf" width="60%" height="80%"/>
<style>
#pdf {
}
</style>
</body>
</html>
With the <embed> tag, the height attribute must be displayed in pixels. Percentages are not allowed.
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
#pdf {
height: 800px;
width: 600px;
}
</style>
</head>
<body>
<embed id="pdf" src="C:\path\Tysk.pdf"/>
</body>
</html>
Source on MDN
The height=x% is depend on the height of its parent element, because it's relative to its parent. In your case, body is the parent of embed element. So if you set a height property to your body element then it will work.
this piece of code works:
<style>
embed {
margin: 0 !important;
border: 0;
width: 100%;
height: 97vh;
}
</style>
<body>
<center>
<embed src="your.pdf#toolbar=0&navpanes=0" type="application/pdf" />
</center>
</body>
From my previous answer https://stackoverflow.com/a/74354395/10802527
For a simple page all 3 behave identically their height and width must be defined in pixels or translated as %view, however browsers may add a frame embeding border of their own, so for height reduce a few points from 100vh similar reduce 100vw to avoid other embedment border/scrollbar anomalies each browser can vary but for Microsoft Edge I find style
embed, iframe, object {
margin: 0!important;
border: 0;
width: calc(100vw - 18px)!important;
min-height: calc(100vh - 18px)!important ;
}
works more often than not or as shown below simpler width: 99vw; height: 97vh; is a good place to work from
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, embed, iframe, object { margin: 0!important; border: 0; width: 99vw; height: 97vh; }
</style>
</head><body><center>
<div>embed
<embed src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" >
</div>
<div>object
<object data="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" type="application/pdf" typemustmatch="true" >an</object>
</div>
<div>iframe
<iframe src="http://infolab.stanford.edu/pub/papers/google.pdf#view=FitV" style="border:none;" >an</iframe>
</div>
</center></body></html>
I think this code will help your problem well, if you've not already tried this one.
<object data="/pdf/mysample.pdf" type="application/pdf" width="100%" height="80%">
</object>
Greetings.
Feel free to tell me the result of this try.
I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
I am trying to make a content area with a specific size, but I want nothing to be displayed if the returned result from the api is empty.
This is the code for the html:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>
I'm calling an API that sometimes might return a null result.
Javascript is off the table.
I've tried to use a css restraint like this:
.myclass {
max-width: 1060px;
max-height: 392px;
& > iframe {
min-height: 0;
min-width: 0;
max-width: 1060px;
max-height: 392px;
}
& > iframe:empty {
display: none;
}
}
The behavior for the css is: the iframe is hidden all the time, although I have content inside it.
Also if the iframe is like this:
<div class="myclass">
<iframe frameborder="0" src="http://localhost:1000/example">
<!--notice white-space here-->
</iframe>
</div>
The css will not see the iframe as empty.
I actually made it happen without javascript.
But you need to create a proxy that generates the css.
If below is not a possibility then all bets seem off. Good luck!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url('iframecheck.asp?url=http://www.example.com');
iframe {
width:1000px;
height:400px;
}
</style>
</head>
<body>
<iframe src="http://www.example.com"></iframe>
</body>
</html>
The iframecheck contains code that checks whether the url has empty response, if it does it returns css like this:
iframe {
display:none;
}
Which will automatically override the other iframe style.
Don forget to force the text/css content type header if you do.
<%response.ContentType="text/css"%>
I am relatively new to web development and my school has asked me to create a webpage that will host the school's webshow and I am having trouble centering the embedded video.
I tried adding an inline style margin-left: auto; margin-right: auto; to the embed code but that is not centering it. I can change the margins manually but I want the video to be automatically centered whenever somebody visits the page.
Are auto margins not supported in embed tags?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<div style="background-image:url(img/Stage-Background.png)"; margin-top:100px; margin-bottom: 100px;>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-left:auto; margin-right:auto;"></embed>
</div>
</body>
</html>
Working simpler example showing margin style being ignored, at least on Chrome:
/* does not center it: */
embed { margin: 0 auto; }
div, embed { border: 1px solid black; }
div { width: 100%; }
<div>
<embed src="https://cdn.sstatic.net/stackexchange/Img/se-logo.png">
</div>
On Windows Chrome that renders as:
In your embed code, try to use the following just before and just after the embed code.
<center>
<embed>
//youtube url here..
</embed>
</center>
or you could use this margin: 0 auto;
I embed iframe element in my HTML page:
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
applet.html looks like this:
<html>
<head>
</head>
<body>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
</body>
</html>
The problem is: how to display a div element (with position: absolute) over a Java applet which is inside iframe.
I tried to use another iframe element:
<html>
<head>
</head>
<body>
<iframe src="applet.html" frameborder="0" style="width: 600px; height: 600px;"></iframe>
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 99"></iframe>
<div style="position: absolute; top: 10px; left: 10px; background-color: gray; height: 150px; width: 150px; z-index: 100">Hello World</div>
</body>
</html>
Works fine in IE, Firefox but not in Chrome.
I found an article that seems to provide a solution, so I'll not claim the credit for coming up with it:
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
From the article:
The solution is to have a third Iframe
C within Iframe A. Iframe C has a
z-index within Iframe A that is higher
than the z-index of the Applet. It is
positioned so that it's rectangle as
considered by the top page is
identical to that of the Iframe B
overlay.
I pasted second IFrame code from your main page into applet.html like so:
<iframe src="javascript:false;" frameborder="0" style="position: absolute; top: 10px; left: 10px; width: 150px; height: 150px; z-index: 1"></iframe>
<applet code="ClockApplet.class" width="100%" height="100%">
</applet>
And it seemed to do the trick in chrome.
I did get a frame border but i'm guessing this is fixable. Give it a go.
This problem is partly solved with latest updates, at least on MacOSX:
I tested DIVs with fancy CSS effects like opacity, shadows and round corner over an applet, it is working well in Safari, Firefox 11 and Chrome 19: no issue in the composition, no glitches.. no iframes!
It is still broken on Ubuntu, though. Really frustrating. I don't know for Windows?