Resize embedded Youtube videos

This topic is: resolved

Tagged: , ,

This topic contains 8 replies, has 2 voices, and was last updated by Zetland Zetland 3 years, 5 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #22473
    Zetland
    Zetland
    Participant
    Post count: 33

    Hello again,

    I’m having an issue when it comes to embedding Youtube videos. When I use Youtube’s own query string to make the video smaller, it still appears in as big a size as possible.

    I’ve tried a few things to fix this – adding a div container and then setting that to a particular size, adding a class to the iframe with a max width attached – but these either don’t work or chop the video in half, rather than resizing it to a half of what it was.

    Could you show me how to fix this?

    Thanks

    #22475
    Zetland
    Zetland
    Participant
    Post count: 33

    You can see the issue here: http://vocularapp.com/faq/

    #22491
    Veena
    Veena
    Moderator
    Post count: 8167

    Pls try the below custom CSS in themeoptions –

    .fluid-width-video-wrapper iframe.vocularVideo {
        max-width: 600px;
        max-height: 400px;
    }
    
    #22610
    Zetland
    Zetland
    Participant
    Post count: 33

    Thanks! I’m also trying to center align the video but can’t seem to get it to work. I’ve tried align: center, margin: auto, display: block, align: middle, but none of these do anything with the iframe. Can you let me know how I should be doing this?

    #22614
    Zetland
    Zetland
    Participant
    Post count: 33

    Can you also show me how to change the style of .fluid-width-video-wrapper so that it’s padding-top: 40%; instead of padding-top: 50%?

    #22645
    Veena
    Veena
    Moderator
    Post count: 8167

    Can you pls check this tutorial –
    https://premium.wpmudev.org/blog/how-to-center-a-video-in-wordpress/

    2. Pls use the below custom CSS –

       .faq .fluid-width-video-wrapper {
        padding-top: 40% !important;
       }
       

    If you simply give the below css without mentioning the specific div class/id (faq) ll affect the entire video-wrapper that you would use in other pages . So here we ensure that we are restricting the padding-top to only for the videos in faq section.
    .fluid-width-video-wrapper {
    padding-top: 40% !important;
    }

    #22669
    Zetland
    Zetland
    Participant
    Post count: 33

    Thanks for your help here. I had tried that method already though and it hasn’t made a difference. I’ve added it again so you can see for yourself: http://vocularapp.com/faq/

    Is there something which is overriding any attempt at alignment that I try? Everything I’ve done so far has kept it left-aligned…

    James

    #22704
    Veena
    Veena
    Moderator
    Post count: 8167

    Can you try the below custom CSS and see if it helps ..
    Not sure how well it works –
    Pls modify to below custom CSS –

    .page-id-11 .fluid-width-video-wrapper {
        padding-top: 0 !important;
    }
    .page-id-11 .fluid-width-video-wrapper iframe.vocularVideo {
        max-width: 700px;
        height: 450px;
        position: relative;
    }
    
    #22839
    Zetland
    Zetland
    Participant
    Post count: 33

    You’ve done it! Thank you very much.

    James

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Resize embedded Youtube videos’ is closed to new replies.