vertical align two class with youtube

[kablakar]

i have a box image with 40% of full screen, below this box I have a youtube video (iframe), but I can not align in responsive (height)

I can not insert the video in the class of images because the class has a separate function ajax

how do I then align to 40% of the width of both classes ??

this is a code i have used it’s good for width but not understand because the height in big and not respect the youtube format:

http://codepen.io/anon/pen/rarmxz

this is a result , why the height its’ big ??

http://s22.postimg.org/5ayakawch/tst_Kid.png

[Shikkediel]

Should work like this :

Edited pen

Cheers

[kablakar]

thanks, but not function, go over

view the site : bit.ly/1EfgOsM

[Paulie_D]

I think the answer lies in the padding-bottom

To maintain a ratio of a 100% wide div we need to set the padding-bottom as 56.25% (9/16)….

But our parent div isn’t 100% wide…it’s 40% wide so we need to calculate that number again

This 56.25 / (4 * 10) give us 22.5 but we don’t actually need to do that ourselves because we can use calc.

http://codepen.io/Paulie-D/pen/wBxPWe

[Shikkediel]

view the site

I don’t see the CSS implemented there – furthermore, tables are also used which have their own peculiarities that may lead to trouble.

Good call by Paulie_D by the way. Bit of a brainteaser, this one.

[kablakar]

i have solved with code of “Paulie_D”, but work only on desktop device , id try to show the web site with tablet and mobile device , the video not compare (not show )the video of youtube, WHY ??

[Paulie_D]

No idea. Have you updated your live page so we can test on mobile?

It looks OK on my Nexus 9 tablet but it’s not clear how this is supposed to look.

[kablakar]

view the site with in your tablet in portrait (rotate 90°), and with smartphone

http://bit.ly/1EfgOsL

thanks

[Paulie_D]

Still not sure what this is supposed to look like.

If we don’t know specifically what’s wrong how can we fix it.

Please give exact details of what isn’t right.

[Paulie_D]

Still not sure what this is supposed to look like.

If we don’t know specifically what’s wrong how can we fix it.

Please give exact details of what isn’t right.

[kablakar]

Thanks for your interest, the problem and on tablets and smartphones do not see the video box, it is very strange that this depends only on css added, ON the PC you can clearly see it on tablets and smartphones disappears

view image, on tablets in potrait mode

http://postimg.org/image/dr7crrwxn/

(not show)

[Paulie_D]

Works both ways on my Nexus 9 so I can’t actually see the issue.

Is your experience on any specific device?

[kablakar]

i tested with smartphone blackberry, and also with some android device,

[Paulie_D]

Unless you can show me what this is supposed to look like I’m not sure I can help any further.

[kablakar]

i have already send a image:

http://postimg.org/image/dr7crrwxn/

this is a link :

http://bit.ly/1EfgOsL

thanks, :(

[Author]

Posts