html layout issue when embed a media player - html

I am using the following html scripts to embed images, text and video into one page. For video, I am using sl2videoplayer to render it (an open source silverlight media player). Here is the project's URL => http://sl2videoplayer.codeplex.com/.
The current issue is, only the top part of video could be displayed. I think the reason may be the actual video size (1024 * 768) is larger than the designed size (500 * 240). My purpose is to display all part of video is a small area (to have an effect of zoom out, just like Youtube videos, if we do not double click to view in full screen, we can see all part of video but in a smaller zoom out effect, not display only a part of the video) -- currently only top part of video is displayed.
Any ideas how to solve this issue?
<!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>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<table style="width: 107%">
<tr>
<td style="width: 96px"> </td>
<td style="width: 470px"><img height="113" src="top.gif" width="561" /></td>
<td> </td>
</tr>
<tr>
<td style="width: 96px"><img height="257" src="news.jpg" width="312" /></td>
<td style="width: 470px">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="500" height="240">
<param name="source" value="ClientBin/VideoPlayer.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="initParams" value="cc=true,markers=true,markerpath=markers_movie21.xml,m=http://mywebsite/videos/test1.wmv" />
<a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</td>
<td> </td>
</tr>
</table>
<p>
Here is a test content.
<br />
</p>
</body>
</html>
thanks in advance,
George

I think Silverlight has the ability to scale, but the problem is that your object's aspect ratio is different from your video's aspect ratio, so it gets scaled some but then cut off. If it must fit within 500x240, try making the object 320x240 and putting a 90x240 black bar on either side.

Related

Cannot get email header image to scale

I am trying to use an inline style
The template is simple and is responsive in the browser but is not when I send it to my phone. The image runs off the page and does not scale to the viewport.
Here is the code:
In the img tag I put an inline style.
style="display:block; width:auto; height:100%:"
Where am I going wrong?
I am sending it to an android phone using gmail. Here is the ENTIRE page:
!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Best Holiday Wishes</title> </head> <body> <!-- Begin Content --> <div style="width:100%; height:auto; margin:0 auto;"> <img src="literacy2pointzero.com/images/03.jpg"; style="display:block; width:auto; height:100%:" alt="Holiday Wishes" /> </div> <!-- End Content --> </body> </html>
Try giving these properties.
Style="Max-width:100%;width:100%\9;height: auto;"
It will make the image shrink and resize to its max size.
try this with your image
<img src="http://www.literacy2pointzero.com/images/03.jpg" style="max-width:100%; height: auto;" width="100%" height="auto" alt="Holiday Wishes" />
but the problem might be your viewport tag. Try this one:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Without more info, below is best I can do. It is based off a similar issue in Outlook. It may not work though depending on how your sending email client renders the width property of an image (e.g. Outlook removes percentages and creates a defined value regardless of what you have in the HTML).
First - use a table, it is more stable in email clients. Second by having 3 columns with a defined middle one, you are able to fake the CSS max-width style allowing it to shrink to screen size, but never go past what was defined in the TD tag. ALSO make sure to add the full URL when referencing src or href in emails.
See below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Best Holiday Wishes</title>
</head>
<body> <!-- Begin Content --> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td width="600" align="center"><img width="100%" src="http://www.literacy2pointzero.com/images/03.jpg"; style="display:block;" alt="Holiday Wishes" /></td>
<td></td>
</tr>
</table> <!-- End Content --> </body> </html>

HTML email gap in outlook 2013

I wrote a simple html email template that seems to render fine in all email clients EXCEPT outlook 2013. I've simplified the code to illustrate the problem below:
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>K</title>
<style type="text/css">
table {border-collapse: collapse;}
</style>
</head>
<body style="margin:0; background-color:#70b9b9; -webkit-text-size-adjust:none;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="background:black;padding:0;"><img src="http://jl.evermight.net/outlook2013/pic.jpg" alt="" border="0" style="display:block; border:none;" /></td>
</tr>
</tbody></table>
</body>
</html>
The problem with this code is that there's a black gap between the green and the image, which I can show here:
So how i get rid of this black gap? Again, this is only a problem in outlook2013
You need to zero out the padding and margin in the image. You should probably set at least the width of the image too, even if it is width="100%".
Here is my basic image setup:
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
Also, Outlook has issues with cells shorter than 19px, so make sure your image is tall enough.
Other unrelated notes:
Get rid of <tbody> it does nothing in html email
change background:black; to background-color:#000000;, html email needs the 6-digit hex color

SWF refuses to scale vertically

I'm trying to embed a SWF in a simple HTML page such that it scales to fill the browser window. I didn't create this SWF and lack the tools to edit it, but it's doing something quite odd - it scales to fill the browser horizontally but refuses to scale vertically:
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%">
<param name="movie" value="Snow001.swf" />
<param name="quality" value="high" />
<PARAM NAME="SCALE" VALUE="default">
<embed src="Snow001.swf" quality="high" type="application/x-shockwave-flash" width="100%" height="100%" SCALE="default" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
I've been staring at this HTML for far too long now and I can't see anything wrong with it. Is this a problem with my code or with the SWF itself? If it's a problem with the SWF what do I need to have the Flash guys do to fix this?
Try adding this CSS:
html, body, object { height: 100%; }

X-UA-Compatible IE=7 problems in IE 9

I have html like below, when I'm trying to browse this in IE9, nothing will come up until you mouseover the div. if I change the "X-UA-Compatible" to "IE=8" it will show up.
your suggestions are highly appreciated.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
<body>
<table>
<tr>
<td>
<div style="height:400px; width:400px">
<OBJECT ID="Player" HEIGHT="100%" WIDTH="100%" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
</div>
</td>
</tr>
</table>
</body>
</html>

Fluid height in Internet explorer

I've been trying to make an image resize as you resize the window of the browser. It works in all but Internet explorer. I was requested to do this without external sheets.
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin:0; padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tidsaxel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="dstyle.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 100%; margin:0;">
<table cellpadding="10" height="100%" width="100%" style="margin:0;">
<tr>
<td rowspan="20" height="100%" style="margin:0;">
<img src="pil.png" height="100%" width="48" />
</td>
<td class="Rubrik">Tidsaxel för krav, program, granskning och beslut</td>
</tr>
<tr>
<td>Sverige satsar på utveckling av kärnkraft (1945). Kärnavfallet betraktas inte som något problem.</td>
</tr>
And then it goes on with 20 more rows, I don't think it's nessessary to print them all.
</body>
</html>
The picture doesn't even take up 100% of the height to begin with, and when I resize the window it just gets smaller. Is there a way to fix this? I've read that it's possible with javascript, but I haven't found a solution. It's IE 7 and IE 8 that I've tried on.
In the table, set cellpadding="0" cellspacing="0". But this affects the content area as well. You might want to look into designing your site with DIVs instead.
You might want to look into a CSS solution:
<style type="text/css">
body {
background-image:url(background.png);
background-repeat:repeat-y;
}
</style>