Portfolio width 100% messing up embed of video

[bbrennwald]

Hi there

I found a couple of ways in your forum to get the portfolio single page to fullwidth. i.E.

.x-portfolio .entry-info {
width: 100%;
}

But this also messes up the youtube embedd: https://kreatives-erleben.life/portfolio-item/videos/

any idea how to fix this? I have a child theme running …
cheers

[christopher]

Hi there,

You can add the code below to X > Launch > Options > CSS:

iframe[src*="youtube"] {
    max-width: 80%;
    margin: auto;
    display: block;
}

By the way for the fullwidth Blog you can go to X > Launch > Options > Blog and you can set it to fullwidth.

Use whatever percentage suites your design instead of the 80% in the code.

Thank you.

[bbrennwald]

Thanks for your reply. This does not really fix the problem, as soon as I change the screen width, I get black bars on the top/bottom of the vid.

Fullwidth option in customizer only works for blogposts as far as I know.

Any other suggestions?

[rad]

Hi there,

Forget about that CSS, you can simply wrap your embed code within’s video embed shortcode with your preferred size. Youtube usually has 16:9 aspect ratio, you may choose that to prevent black bars.

Please check this http://demo.theme.co/integrity-1/shortcodes/responsive-video/

And this the example using your embed code

[x_video_embed no_container="true" type="16:9" style="max-width: 520px; margin: 0 auto;"]<iframe width="560" height="315" src="https://www.youtube.com/embed/gTXfGCEdNiQ?wmode=transparent" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen="" wmode="Opaque"></iframe>[/x_video_embed]

Thanks!

[bbrennwald]

worked, thx

[rad]

You’re most welcome!