Resize embedded Youtube videos

[Zetland]

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

[Zetland]

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

[Veena]

Pls try the below custom CSS in themeoptions –

.fluid-width-video-wrapper iframe.vocularVideo {
    max-width: 600px;
    max-height: 400px;
}

[Zetland]

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?

[Zetland]

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

[Veena]

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;
}

[Zetland]

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

[Veena]

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;
}

[Zetland]

You’ve done it! Thank you very much.

James

[Author]

Posts