X-Cart forums - resize youtube

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - resize youtube (https://forum.x-cart.com/showthread.php?t=39373)

l0st	04-26-2008 09:31 AM

resize youtube

Ok. I'm trying to resize a youtube video to play in a page but it's just not letting me!

Here is my css

Code:

.left {

    border: 1px;

    float:left;    

    vertical-align:top;

}

.right {

    border: 10px;

    float:right;

    vertical-align:top;

}

.object {

    width: 150px;

    height: 150px;

}

So I have a div tag..
In my left class I have an image.
closed my div tag
I have a new right div and thats where my youtube video should play!! So inside this new div tag I have the youtube video.

You know what will be easier? let me make you a page..
http://img293.imageshack.us/img293/8408/affiliatepagemi4.png

This is the youtube.. and I change this from <object width="425" height="355"> to object class.
http://www.youtube.com/watch?v=4g9Mqs-Pw2o
Thats my youtube powerpoint.
http://www.discountprintingnetwork.com/partner/

kube	04-26-2008 09:39 AM

Re: resize youtube

Change the embed code you've entered to the dimensions you want.

l0st	04-26-2008 09:52 AM

Re: resize youtube

What do you mean?

kube	04-26-2008 10:13 AM

Re: resize youtube

Well I assume you've hard coded the dimensions into the tpl, and the embed tag has dimensions included in it too...

So either edit (which is the cleanest way)...
<embed width="425" height="355"
to
<embed width="150" height="125"

Or the css to override it like you want...

.object embed {
height:125px;
width:150px;
}

Hope this helps.

l0st	04-26-2008 10:41 AM

Re: resize youtube

http://www.discountprintingnetwork.com/partner/

I didn't do anything to the menu.. take a look at that. why is my menus wide? thanks for helping me bud.

kube	04-26-2008 11:04 AM

Re: resize youtube

Change the main <TD>'s width to 100% - the one that contains the vid.

The menu is wide because it hasn't got a width set and there's nothing to expand the main content's cell to it's own 100% width (which would push/squeeze the side menu and make it appear smaller).

l0st	04-26-2008 12:09 PM

Re: resize youtube

I dont even know what I'm doing wrong.. can you help me get the page how I have it in the photo?
http://img293.imageshack.us/img293/8408/affiliatepagemi4.png

here is what it looks like now..

http://img378.imageshack.us/img378/4909/ewwjc4.th.jpg

This is my /partner/main/welcome.tpl

Code:

<div class="left" >

    <tr>

        <td width="70%" > 

            <img src="img/partner.jpg" />

        </td>

</tr>

</div>

<div class="right" >

<td width="20%" > 

<tr>

<object class="object"><param name="movie" value="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en"></param><param name="wmode" value="transparent"></param><embed width="200" height="180" src="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

</tr>

</td>

</div>

the .css is still the same. I basically need blue around the youtube in the table row.. but i'm going to need to center this video too..

thanks so much for taking the time..

kube	04-26-2008 12:19 PM

Re: resize youtube

Put the image and the video back into the main content table (where the video was before). And make sure the main content table has a width of 100%

The main content table I am referring to is the one with these comments inside it...

stuff

kube	04-26-2008 12:27 PM

Re: resize youtube

Now put them into the one TD (not two) and put a <br /> tag between them.

l0st	04-26-2008 12:28 PM

Re: resize youtube

ok but how do I separate these and make the backround to that div blue. I added: BACKGROUND-COLOR: #448ccb;
also. the image.. i need that to be closer to the menu.. sorry for the 51 questions..

kube	04-26-2008 12:30 PM

Re: resize youtube

Get rid of all the excess TDs that you are putting inside the main TD. It's invalid code.

kube	04-26-2008 12:40 PM

Re: resize youtube

It should look a little like this...

Code:



<td valign="top" width="100%">

<!-- central space -->

<font class="NavigationPath">

<a class="NavigationPath" href="home.php">Main page</a>

</font>

<br/><br/>

<img src="img/partner.jpg"/>

<div style="border: 1px solid rgb(223, 223, 223); background: transparent url(chrome://flashblock/content/flash.png) no-repeat scroll center; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; min-width: 32px; min-height: 32px; cursor: pointer; -moz-box-sizing: border-box;" class="object" title="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en" embedsrc="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en"/>

<!-- /central space -->

</td>

l0st	04-26-2008 12:42 PM

Re: resize youtube

yes but remember we did that to fix the menu..

kube	04-26-2008 12:44 PM

Re: resize youtube

Get rid of the floats you do not need them.

l0st	04-26-2008 12:46 PM

Re: resize youtube

I did that but it doesnt even show the youtube video and shows the a cell space going across the bottom of the main image.

i deleted the float..

kube	04-26-2008 12:50 PM

Re: resize youtube

Use the code you had earlier that was working... do not copy straight from my code. Just use my code as a guide as I can see there are too many central spaces running around now.

kube	04-26-2008 12:55 PM

Re: resize youtube

Think it's only the breadcrumb to sort out now, then wrap a DIV or a table around the image and vid so you can then apply a background.

And sorry about adding all the br's, those td's got me confused ;D

l0st	04-26-2008 01:05 PM

Re: resize youtube

great. but now the breadcrums are all messed up.. also .right isn't blue like I'm asking it to be..

here is my code:

Code:

/* partner main page */



.left {

    position: absolute;

    border: 1px;

    margin-left: -20px; 

}

.right {

    border: 10px;

    vertical-align:middle;

    BACKGROUND-COLOR: #448ccb;

}

.object embed {

height:180px;

width:200px;

}

but how come the right doesnt have a backround color of blue?!

Code:

<td valign="top" width="100%">

<br />

<br />

<div class="left" >

<img src="img/partner.jpg" />

</div>

<br />

<div class="right" >

<td>

<object class="object"><param name="movie" value="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

</td>

</div>

</td>

l0st	04-26-2008 01:09 PM

Re: resize youtube

yeah I just tried to change the <tr> to a table class and it just turns all blue throughout that whole part and you dont see the video..
and if i put the table on the image.. (which the backround should be around the youtube..) the whole things messes up. it adds the footer to the menus col and the video is under the image...
also.. thanks for helping me out. no need to be sorry. i'm glad you're taking the time to help!!!

kube	04-26-2008 01:09 PM

Re: resize youtube

From what we had originally with your code the tds should look like as follows...

<td class="loginMenu">left</td>
<td width="100%" valign="top">central space including breadcrumb above vid and image</td>
<td class="VertMenuRightColumn">right</td>

kube	04-26-2008 01:11 PM

Re: resize youtube

It won't have a background of blue because you're entering invalid TDs. A TD cannot go inside another TD without it having a table supporting it first.

<td><td></td><td> doesn't work

<table><tr><td><table><tr><td></td></tr></table></td></tr></table> although ugly, works.

But we're not asking for extra TDs so I have no ideas where they're coming from as they weren't there before

l0st	04-26-2008 01:18 PM

Re: resize youtube

I'm using the x-affiliate and just recolored the page.. In the
<div class="right" >
I made a
<td class="video" >

added this to css:
.video {
BACKGROUND-COLOR: #448ccb;
}

Now it's up and down.. not too high and low.. but need to have it from left to right too.. so we're getting close. :D

also if i delete the <br /> the breadcrums is hidden but its aligned good! than we will need to just get the blue to the left and right and have the video in the middle.. thanks for working with me.. :D

l0st	04-26-2008 01:28 PM

Re: resize youtube

Im just going to share with you the updated code:

Code:

<td valign="top" width="100%">

<br />

<br />

<div class="left" >

<img src="img/partner.jpg" />

</div>

<br />

<div class="right" >

<td class="video" >

<object class="object"><param name="movie" value="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

</td>

</div>

</td>

and invite you to the page..

http://www.discountprintingnetwork.com/partner/

thanks!

kube	04-26-2008 01:36 PM

Re: resize youtube

So there are 5 columns now and the floats are back. I'm not sure how to handle this. The image you've supplied has only 2-3 columns.

Is there going to be any text underneath?

l0st	04-26-2008 01:38 PM

Re: resize youtube

yes, I'm going to add text underneath all of this.. did you see the image I posted? also.. I dont have the floats in the css...

l0st	04-26-2008 01:45 PM

Re: resize youtube

I tried to change the <td valign="top" width="100%"> to a <table valign="top" width="100%"> but it all messed up.. but maybe if you tell me where all the extra stuff is coming from.. we can delete it..

l0st	04-26-2008 01:56 PM

Re: resize youtube

I see where you got your
<td><td></td><td>

(from the source..) but I even tried to open it up.. I added:
<table>
(everything we have now)
</table>

Didnt work..

kube	04-26-2008 02:11 PM

Re: resize youtube

This is what you should be aiming for. This should go inside the central space provided it has a beginning TD and ending /TD outside of it....

Code:



<!-- central space -->



<table>



<!-- TR breadcrumb row (2cols combined) -->

<tr>

<td colspan="2">

<font class="NavigationPath">

<a class="NavigationPath" href="home.php">Main page</a>

</font>

</td>

</tr>





<!-- TR picture and vid row (2cols) -->

<tr>



<td> <!-- TD cell 1 picture -->

<img src="img/partner.jpg"/>

</td>



<td bgcolor="#FF0000">  <!-- TD cell 2 vid -->

<object width="150" height="125"><param name="movie" value="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en&rel=0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="150" height="125"></embed></object>

</td>



</tr>



<!-- TR text row (2cols combined) -->

<tr>

<td colspan="2">some loads of text</td>

</tr>

</table>



<!-- /central space -->

l0st	04-26-2008 02:21 PM

Re: resize youtube

how can we delete the breadcrums from the main page only?!

kube	04-26-2008 02:33 PM

Re: resize youtube

locate something like this for breadcrumbs...

{include file="location.tpl"}

and {* comment it out *}

l0st	04-26-2008 03:00 PM

Re: resize youtube

ok.. i'm going to try and do this.. maybe we can use tbody for this.. what do you think?!

or maybe I can try and put it in here:
{$lng.txt_welcome_to_the_partners_zone_note}

l0st	04-26-2008 03:12 PM

Re: resize youtube

actually, I think putting it in a language variable helped out a lot!!!!

kube	04-26-2008 03:33 PM

Re: resize youtube

Did you try the table and put it inside the central space from post number 28 http://forum.x-cart.com/showpost.php?p=213985&postcount=28

It will save you a lot of headaches (below the breadcrumb row has been removed).

Code:

<!-- central space -->

<table>

<!-- TR picture and vid row (2cols) -->

<tr>



<td> <!-- TD cell 1 picture -->

<img src="img/partner.jpg"/>

</td>



<td bgcolor="#FF0000">  <!-- TD cell 2 vid -->

<object width="150" height="125"><param name="movie" value="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en&rel=0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/4g9Mqs-Pw2o&hl=en&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="150" height="125"></embed></object>

</td>



</tr>



<!-- TR text row (2cols combined) -->

<tr>

<td colspan="2">some loads of text</td>

</tr>

</table>

<!-- /central space -->

l0st	04-26-2008 03:36 PM

Re: resize youtube

I figured out the problem with .right.. its in the .css for example if i change .object embed the table actually resizes accordinally. how can we fix that?!?

/* partner main page */

.left {
position: absolute;
border: 1px;
margin-left: 5px;
}
.right {
border: 1px;
height: 1px;
}
.object embed {
height:170px;
width:250px;
}
.video {
BACKGROUND-COLOR: #448ccb;
}

kube	04-26-2008 03:51 PM

Re: resize youtube

Also get rid of the...

<p align="justify"> </p>

so the table can be closer to the top.

l0st	04-26-2008 03:53 PM

Re: resize youtube

I just went with what you helped.. I think this just did save me another day.. thank you so much!

kube	04-26-2008 03:58 PM

Re: resize youtube

Also remember: if you're going to change the dimensions of the object, you'll also have to change the dimensions within the embed as well.

kube	04-27-2008 10:28 AM

Re: resize youtube

Give the outer lying table that contains the image and vid a width of around 690. And that should get you closer to the image.

l0st	04-27-2008 12:47 PM

Re: resize youtube

Hey, the bottom.. where the text is. how can I made that one td not two?!

kube	04-27-2008 01:40 PM

Re: resize youtube

Within the the 3 TRs you have created put a colspan="2" in each single TD.

for example...
<tr>
<td colspan="2"><h1><center> Your Header </center></h1></td>
</tr>
<tr>
<td colspan="2"><strong> Your Welcome Txt </strong></td>
</tr>
<tr>
<td colspan="2"> Your UL's </td>
</tr>

All times are GMT -8. The time now is 10:14 PM.