?
Solved

Sizing inserted video in HTML5 page -

Posted on 2012-09-01
9
Medium Priority
?
849 Views
Last Modified: 2012-09-07
Hi -

I'm trying to insert code for an external flash video player and the dimensions aren't working. I'm trying to get 800x400, and the width seems to work OK, however the height is limited. I have a banner above the flash player on that page.  I'm not sure which part of the code needs to be tweaked, so not sure which parts to post here.

but here's the code for the flash player I'm inserting:

  <center>

<body>

<embed src="http://www.gdd.ro/gdd/flvplayer/gddflvplayer.swf" flashvars="?&autoplay=false&sound=70&buffer=4&vdo=http%3A%2F%2Fmydomain%2Ecom%2Ffolder%2Ftest%2Eflv" width="200" height="400" allowFullScreen="true" quality="best" wmode="transparent" allowScriptAccess="always"  pluginspage="http://www.macromedia.com/go/getflashplayer"  type="application/x-shockwave-flash"></embed>

</body>

Open in new window


So I see the banner has some css elements. Not sure what is preventing the height to display correctly, but any hints appreciated much. Thanks!
0
Comment
Question by:Trevor Local
  • 5
  • 3
9 Comments
 
LVL 17

Assisted Solution

by:Kent Dyer
Kent Dyer earned 400 total points
ID: 38357746
There a reason you are using a center HTML tag outside the body../body html tags?

Shouldn't it be more like this?
  
<html>
<head>
<title>my cool web page</title>
</head>
<body>
<center>
<embed src="http://www.gdd.ro/gdd/flvplayer/gddflvplayer.swf" flashvars="?&autoplay=false&sound=70&buffer=4&vdo=http%3A%2F%2Fmydomain%2Ecom%2Ffolder%2Ftest%2Eflv" width="200" height="400" allowFullScreen="true" quality="best" wmode="transparent" allowScriptAccess="always"  pluginspage="http://www.macromedia.com/go/getflashplayer"  type="application/x-shockwave-flash"></embed>
</center>
</body>
</html>                                  

Open in new window

HTH,

Kent
0
 

Author Comment

by:Trevor Local
ID: 38357758
Thanks Kent. I switched that. Any idea about how to get the video height to be what I need? thanks
0
 
LVL 39

Assisted Solution

by:BillDL
BillDL earned 1600 total points
ID: 38358179
delmarlocal

The code you posted clearly sets the dimensions of the player to:
width="200" height="400"
Change those parts to:
width="800" height="400"
and see what happens.

Some web video players will not stretch a smaller video file unless you tell it to with a switch like   NoStretch=False   or similar.  It all depends on what settings the player needs to have specified.

You are using GDD FlvPlayer:
http://www.gdd.ro/free-flash-flv-player
It gives the Parameters on that page and also has a Code Generator.  All it says about the dimensions is this:

ABOUT PLAYER SIZE
You can change the player width and height as you like.  In our sample code we have the 4/3 format, size: 400/340 px (where 40px is the controls-bar height).  Percentage sizes are also accepted (like width 100% and height 100%)


In the download package (http://www.gdd.ro/gdd/flvplayer/gddflvplayer-v3.6.zip) there is an "example.html" file that shows the same HTML Code Generator as the GDD FlvPlayer home page linked to earlier, and has two videos embedded into it.  It is the same page as this one:
http://gdd.ro/flvplayer/examples/example.html

The whole idea of having your own free Web Video Player is that you have the Flash file in your own web webserver space rather than fetching it from the www.gdd.ro site each time you embed a video.  What would happen if their site was down?

It's up to you where you upload it to your site.  Usually it would be best to have your *.FLV files in the same folder as the "gddflvplayer.swf" file, although that does not have to be the case.  You should be able to enter the path to the *.SWF file as a RELATIVE path, ie. relative to the *.HTML web page that is loading it.  You can usually have the path to the FLV file as relative to the HTML page also, so it makes sense to have them in the same folder.

Assuming you have the SWF file for the player and the FLV files in one folder named "videos" on your site, and that you have a custom logo named "delmarlocal.jpg" in that folder, here is the code generated by the code generator for a video named "DIY_Dentistry.flv":
<embed src="videos/gddflvplayer.swf" flashvars="?&autoplay=true&sound=70&mylogo=videos%2Fdelmarlocal%2Ejpg&buffer=2&vdo=videos%2FDIY%5FDentistry%2Eflv" width="800" height="600" allowFullScreen="true" quality="best" wmode="transparent" allowScriptAccess="always"  pluginspage="http://www.macromedia.com/go/getflashplayer"  type="application/x-shockwave-flash"></embed>

Open in new window


You are aware that the    %20   %2E   %2F   etc symbols are HTML replacements for a space, a dot, and a forward slash?

I see that on their home page
http://www.gdd.ro/free-flash-flv-player
they also use the Hex Code for the & (ampersand) character in the embed code, namely   &#038;

Using <embed> code to position Flash-enabled web players is not HTML5, it is old HTML.  One of the new things about HTML5 is that it supposedly should allow new methods for embedding videos in a web page without the need for Flash support, and this is done to enable mobile devices that don't use the Adobe Flash Player plugin to display videos.  As with most "standards", there has been squabbling, dissention, and resistance that mean web developers are left trying to get half-baked standards to work in semi-compliant browsers, so it's far from being a complete replacement for "HTML4" and won't be for a long time.

I hope this helps.

Bill
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Trevor Local
ID: 38358194
Hi Bill - thanks. Lots of information!

The code I posted was just a sample. I did start out with the width="800" height="400" and only the width changes. I've pasted the code on a blank HTML page and can get the proper dimensions. I've even tested it on a live HTML viewer website, and it displays properly. Just can't seem to get proper dimensions on this current one,  no matter where I put it on the page. I can go wide, but not any higher than what appears to be a height of 200 or close to it.

I'm using the gdd.ro site as a temporary testing tool to see how the video will look on this page, and I'm not sure which domain it will land on, so I will switch over to a local copy of the video player once it does land somewhere. I'll use the snippet of code you gave too.

So- yeah-  not sure what to check on next.

thanks again
0
 
LVL 39

Expert Comment

by:BillDL
ID: 38358258
I suppose the next thing you would really have to look at is whether there are any constraints on the pixel dimensions or % of the <DIV> or other container that the embed code is within.

Perhaps if you could direct us to a URL where the page isn't displaying it properly, or provide the full HTML and CSS for that page, we might identify the cause.  If you prefer, post the codes and make the paths/URLs generic like you did with "http://mydomain.com/folder/test.flv"
0
 

Assisted Solution

by:Trevor Local
Trevor Local earned 0 total points
ID: 38358982
Here's a link to the testing site:

HTML page

If that's doesn't help, I'll go through the HTML and CSS and post that as well.
thanks!
0
 

Accepted Solution

by:
Trevor Local earned 0 total points
ID: 38359711
I replaced
width="800" height="400" allowFullScreen="true"

Open in new window

with
style="width:800px;height:400px" allowfullscreen="true"

Open in new window


That seems to have done the trick.
0
 

Author Closing Comment

by:Trevor Local
ID: 38375587
thanks for the input!
0
 
LVL 39

Expert Comment

by:BillDL
ID: 38375875
Thank you delmarlocal
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question