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;
Related
I have built a WebGL game using Unity, and I put it on a domaine, everything is working fine, but I want to center the game screen in the webpage like in thisimage.
here is the index.html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game Title</title>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL.json");
</script>
</head>
<body style="background-color:black;">
<div id="gameContainer" style="width: 1024px; height: 576px; margin: auto "></div>
</body>
</html>
I found the answer for this i just added a this style to head
<style>
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
</style>
and I put the div gameContainer inside another div with the style above. Not sure if this is the right solution, but it works
I encountered a similar issue, my WebGL build was suddenly left aligned. Found out that I mistakenly changed the WebGL template setting on Player Settings from Default to Minimal. Default is centered aligned.
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'm running some basic beginner tutorials in order to learn how to properly run html. I've come to the portion where i'm using a div tag in css to center the content. However, once i open the test page, everything stays locked to the right of the browser. I've been scouring the forums for any solution and nothing seems to fix the issue. Tested in Chrome and IE.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1> My Website </h1>
<p>Learn more about me.</p>
<img src="img/lady.jpg" alt="skyrim">
<h2>My New Section </h2>
</div>
</body>
</html>
Here's the CSS:
a {
color: red;
text-decoration: none;
}
h1 {
font-family: sans-serif;
}
div {
width: 500px;
margin: 0 auto;
background: red;
text-align: center;
}
You have no Doctype. This puts you in Quirks mode (the land of incompatibility).
Add one as the very first thing in your document.
<!DOCTYPE html>
It looks fine in my end:
http://jsfiddle.net/Riskbreaker/JH7NK/
If you mean that extra space you have vertically on top its your h1.
I edited to show you:
div h1 {margin: 0}
You need to add a DOCTYPE. This is an example of the HTML5 DOCTYPE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML here
</body>
</html>
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>.
how can I (cross-browser compatible) maximize an iFrame so that it appears to be the page in the URL bar even though it is served from a different server?
I guess this ought to work:
<!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" xml:lang="en" lang="en">
<head>
<title>Test page!</title>
<style type="text/css">
html, body {
overflow: hidden;
margin: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<iframe src="page.htm" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
Edit 1: You could just hide the scrollbars of the page, with the HTML and scroll=no directive
(that solution should be multi-browser)
Edit 2: Now even XHTML proof ;)
Edit 3: And finally w3 validator ok
(be sure to add scroll=no in the BODY if you run in Internet Explorer compatibility problems)
Use javascript with the event body load to set iframe height & width to window height & width.
For example in jquery :
$(document).ready(function () {
initIframe();
});
function initIframe() {
$("iframe").height($(window).height());
$("iframe").width($(window).width());
}
Tested on FF, IE and GC
You could set the width and height of the parent page's html and body tags to 100%, as well as the iframe tag that contains the page you want to load.