Docs

[ozzywood]

Hi,

I’ve read this topic: https://community.theme.co/forums/topic/video-post-with-2-351-panavision-aspect-ratio

I’ve implemented what was suggested, but the result is still not right, as you can see here:

http://onscriptwriting.com/ex-machina-shows-alex-garland-genius/

Could you please help me get this right? Many thanks!

Cheers,

Karel

[Christian]

Hey Karel,

Try adding the code below in your Appearance > Customize > Custom > CSS.

.x-video .x-video-inner {
    padding-bottom: 42.25% !important;
}

Please take note we still do not have support for that aspect ratio so if the code doesn’t work, we recommend that you seek assistance from a WordPress developer or use a third party plugin.

Thank you for understanding.

[ozzywood]

Thank you! Works beautifully for 2.35.

Now, it applies it to ALL videos, including the standard 16×9.

I’m not 100% familiar with the use of classes. I tried define the “x-video35″ class, then add it to the embed code just for those videos, but it doesn’t seem to work.

Here’s what I did:

css:
———————————
.x-video235 {
padding-bottom: 42.25% !important;
}
———————————

embed code:
———————————
<iframe src=”//fast.wistia.net/embed/iframe/mze2voyecu?seo=false&videoFoam=true” allowtransparency=”true” frameborder=”0″ scrolling=”no” class=”x-video235″ name=”x-video235″ allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=”100%” height=”100%”></iframe></div></div>
<script src=”//fast.wistia.net/assets/external/E-v1.js” async></script>
———————————

What am I doing wrong?

[Rue Nel]

Hello There,

Please change your embed code being wrap by a video embed shortcode.

[x_video_embed class="x-video235" type="16:9" no_container="true"]<iframe src="//fast.wistia.net/embed/iframe/mze2voyecu?seo=false&videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div></div>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>[/x_video_embed]

Hope this helps. Kindly let us know.

[ozzywood]

No luck… I removed the </div> tags, but still no difference.

Should I have clarified that the link above is for a Video Post?

http://onscriptwriting.com/ex-machina-shows-alex-garland-genius

Thank you for your help.

[Nabeel A]

Hi again,

You can use page ID and section class to make sure the CSS is only applied to the desired video. For example, to apply it for the video in question:

.postid-232671 .entry-featured .x-video .x-video-inner {
    padding-bottom: 42.25%;
}

Let us know how this goes!

[ozzywood]

Beautiful! Thanks!

Is there a way to apply it to the archive/index pages as well?

Archive/Home: http://onscriptwriting.com
Post: http://onscriptwriting.com/ex-machina-shows-alex-garland-genius

Cheers,

Karel

[Lely]

Hello Karel,

You’re welcome and yes, please update above CSS to this:

.postid-232671 .entry-featured .x-video .x-video-inner,
.blog .entry-featured .x-video .x-video-inner {
    padding-bottom: 42.25%;
}

Hope this helps.

[Author]

Posts