Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS vertical align two class with youtube

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #197211
    kablakar
    Participant

    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

    #197240
    Shikkediel
    Participant

    Should work like this :

    Edited pen

    Cheers

    #197241
    kablakar
    Participant

    thanks, but not function, go over

    view the site : bit.ly/1EfgOsM

    #197242
    Paulie_D
    Member

    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

    #197243
    Shikkediel
    Participant

    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.

    #197388
    kablakar
    Participant

    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 ??

    #197392
    Paulie_D
    Member

    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.

    #197396
    kablakar
    Participant

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

    http://bit.ly/1EfgOsL

    thanks

    #197420
    Paulie_D
    Member

    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.

    #197421
    Paulie_D
    Member

    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.

    #197430
    kablakar
    Participant

    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)

    #197432
    Paulie_D
    Member

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

    Is your experience on any specific device?

    #197460
    kablakar
    Participant

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

    #197469
    Paulie_D
    Member

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

    #197471
    kablakar
    Participant

    i have already send a image:

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

    this is a link :

    http://bit.ly/1EfgOsL

    thanks, :(

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.