I am trying to understand what I am doing wrong. I am using this code
<div style="background-image: url('http://www.ionianradio.gr/radio1/images/tv5.png');"
align="center">
<object id="livestreamPlayer" style="visibility: visible;"
data="http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf?channel=ionianradio&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc"
type="application/x-shockwave-flash" width="950" height="500">
</object>
<div>
Unfortunatelly I am seeing only the object and not the background. I am not so sure if I can do this, though. Background is a tv monitor and the object is a livestream show.
you need to specify height in div in order to the background show up.
snippet below:
div {
background-image: url('http://www.ionianradio.gr/radio1/images/tv5.png');
height: 600px /*whatever you like*/
}
<div align="center">
<object id="livestreamPlayer" style="visibility: visible;" data="http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf?channel=ionianradio&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc" type="application/x-shockwave-flash"
width="950" height="500"></object>
</div>
Notes:
Try not to use inline CSS, since it is not a good practice, instead use classes or ID's
You are using align=center, try to avoid that since it is deprecated, instead you can assign a class/ID and with CSS make it aligned center to what you need/want.
Looks like your closing div tag is missing the slash. You may also need to add some additional styles to ensure the div is larger than the video player
<div style="background-image: url('http://www.ionianradio.gr/radio1/images/tv5.png');" align="center"><object id="livestreamPlayer" style="visibility: visible;" data="http://cdn.livestream.com/chromelessPlayer/v20/playerapi.swf?channel=ionianradio&color=0x000000&autoPlay=false&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc" type="application/x-shockwave-flash" width="950" height="500"></object>
</div>
Related
I've got two codes and I don't know why the use of height=100% works only on image? in other cases it does nothing and the content choose the minimum height
the object ignore it but not the image.
<section id="corps">
<object data="images/test.pdf" type="application/pdf" width="100%" height="100%">
</object>
<img src="images/test.png" width="90%" height="90%">
</section>
And plus, Why width and height property works in html without style = "..." but others like min-height needs it. Is it just because html support these?
Thanks!
<style>
#corps{ height: Xpx} //replace X with the value that suits you
#corps object{height: 100%} //Now you'll get the 100% height
</style>
Alternatively, if you use position: absolute then height: 100% will work just fine.
About why <img src="images/test.png" width="90%" height="90%"> works, because height and width are HTML5 properties for images.
You can achieve the same thing by using <img src="images/test.png" style="width: 90%; height: 90%;">, Now this is CSS.
I have my HTML as below
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Top div (d1) is fixed. while scrolling bottom div(d2) goes behind top div. But youtube video
stay on top.
I want to put it behind top div. Is there a way??
The problem could be that the iframe is holding the flash youtube video on top. It has to do with the z-index of a Flash object.
I've used this solution before with success...
http://manisheriar.com/blog/flash_objects_and_z_index
Put your Flash content into a wrapper div called flash
Add to your object tag
Add wmode="transparent" into the embed tag
Use CSS to set the position and z-index for your div (don't set negative z-index values as it will hide your Flash)
Use this css:
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
Edit: you would have to remove the Iframe. Wich would of bin a good idea in the first place, since iframes suck :p
That's because ActiveX objects tend to sit on top of ALL html elements. You'll have to have to add a "windowless" mode to your
<object>
<param name="wmode" value="window" />
</object>
Here is how I solved it.
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Note ?wmode=transparent" in src of iframe
What I tried when I came across similar situation:
#bridgeDIV
{
position:relative;
}
#riverDIV
{
position:fixed;
overflow-y:scroll;
}
Imagine river flowing under the bridge.
I don't know if this exact question has been asked, if so I am sorry. I can say in my defense that i've checked up about 10 question with a familiar title.
The problem is this:
<div id= "">
<object>
<embed>
<img src="" />
</embed>
</object>
</div>
One of the containers object or embed are positioned absolutely in the body tag. Depending on which browser. For IE 6 7 8 embed is potioned absolutely. For others the object.
Trial and error brought me to this solution and it works very good in all browsers thank god.
Now i am adding a button, which is represented by IMG tag, and i also want to position it absolutely (that is relativly of my movie). In all browsers (except IE 6 7 8 ) this works with the following CSS:
#closeButton
{
position:absolute;
right: 10px;
top: 10px;
z-index:400;
/*background: none;*/
/*display:none;*/
}
Since my object is hidden until some point, the button is also hidden in it/ with it.
Not in IE as you may guess. There, not only the button is visible, but relative of the WINDOW!
Meaning miles away from the movie.
I added a sort of a hack an use JS to hide/show the button the CSS now is:
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
display:none;
}
And it took the right place and hides and shows with the movie. Guess what BUT, it gets tricky to click it=) Because whenever i put the mouse over the button, movie triggers an event onRollOut and they both dissapear =) hilarious
QUESTION: Why does my button position relative of the window? Or maybe the problem is hiding some place else?
PS I am using relative/absolute positioning to emulate crossbrowser fixed positioning so i can't give it up. But the button's behabiour is unacceptable=) And it will be tricky to place it directly inside the movie, i hope it could be done without it. Although it's an easier way. but more work for every movie.
I'll repeat the problem is IE-only, in all other browser the button behaves.
The whole code
http://pastebin.com/fZvWyVsF
http://pastebin.com/zJBhNeVB
Update:
I tried following advice about positioning the wrapper, with some modification. Now I have this code
<div id="bigBanner">
<OBJECT width="100%" height="90">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="opaque" >
<PARAM name="AllowScriptAccess" VALUE="always" >
<EMBED src="big.swf" width="100%" height="90" wmode="opaque" quality="high" AllowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
<noembed></noembed>
</OBJECT>
<div id="closeButton"><img src="close-box.jpg" onClick = "HideAll();" title="Закрыть"/></div>
</div>
Having those styles:
http://pastebin.com/dCULjHva
It shows the button really well. But again it (button) keeps "running away in IE".
Instead of absolutely positioning the object/embed, place it in a wrapper and absolutely position said wrapper. I'd also place the button in the wrapper so you can position it relatively, but still benefit from the absolute positioning of the outer container.
<div id= "wrapper">
<object>
<embed>
<img src="" />
</embed>
</object>
<div id="button">foo</a>
</div>
#wrapper{position: absolute;}
I believe you have to wrap your movie and button (that are being absolutly positioned) in a div that has position:relative; and a width and height (just to be sure)
<div id= "wrap">
<object>
<embed id="movie">
</embed>
</object>
<img src="" id="closeButton" />
</div>
So the CSS then would be
#wrap
{
position:relative;
width:640px;
height:360px;
}
#movie
{
position:absolute;
width:640px;
height:360px;
z-index:100;
top:0;
left:0;
}
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
}
Most positioning problems I find to be because I didn't wrap it in something that is positioned:relative. I hope this helps.
DEMO: http://jsfiddle.net/derno/C8FHR/
I have a tag to include add a SWF but I would like around it to control it's size.
I have something like the following:
<div style="left: 852px; top: 596px; width: 30px; height: 20px;">
<embed align="middle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="false" wmode="transparent" quality="high" style="overflow: hidden;">
</div>
But unfortunately, the embed tag (SWF) expands from the DIV. I thought overflow:hidden would assure that it does not.
How can I fix this issue please?
Thank you very much,
Rudy
You need to overflow:hidden; on the parent div, the one with dimensions defined.
SUMMARY: an embed with 100% width and height pushes its parents size to be 100% width and height of the grandparent. How do I get the embed element to collapse all the white space around it so that it fits the width and height of its parent perfectly?
I have a page with an image, which upon being clicked gets replaced by an embed element that plays a quicktime movie.
The problem is that the embedded movie has a large amount of white space around it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div style="border:1px solid #000;">
<embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>
</body>
</html>
The video is of unknown size so how do I get rid of this whitespace while leaving height and width at 100%?
EDIT: Though it doesn't show, I am actually clearing the padding and margins. The white space still remains.
EDIT 2: The white space in question is between the movie and the black border, not the black border and the browser.
Are you clearing the default browser margin and padding? Otherwise, you need to do that.
Most people use CSS reset styles to normalize margin and padding across browsers. A good one to use is Eric Meyer's: CSS Reset
EDIT: To remove the space underneath the embed, set display: block on the embed. See: http://media.nodnod.net/embed.html
WOOHOO, I've searched a very long time for this answer and I finally found it!
You'll have to put the embed element in an object element which is in an iframe or a frame:
The iframe page
<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>
the iframe source
<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>
Make sure that the height and width value in the iframe, object and embed element the same is.
I am not familiar with embed elements, but it seems to me that when you set the width to 100%, you set it to the width of the parent element, which is a div in this case and a div occupies the whole available width as it is a block element.
So you can either float the surrounding div or display it inline to have its size adjust to the contents instead of the available space around it.
Try setting float: left on both the div and the embedded element just like this. That will remove the extra white space.
<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
<embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>
Hmm...
It's an ugly hack, but you could use a table:
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle"><embed /></td>
</tr>
</table>
Have you used a DOM inspector to verify the whitespace isn't part of the embed?
Also, you can put it in a panel/div/etc and mess with the css:
position: relative; top: -10px; left: -10px; overflow: hidden;
it turns out that theres no way of doing this other than making the movie scale to the size of the parent by using scale="aspect".
While not the perfect solution, it will have to do for now.