Support » Theme: Editor Blocks » iframe width and alignment

  • Resolved wiebke.wetzel

    (@wiebkewetzel)


    Hello Danny,

    meanwhile I use your theme for building a second website, as I like it a lot. It’s not overloaded and helps me to create beautiful websites with Gutenberg blocks. Today I came across an issue which I could not solve entirely.

    I want to embedd a Youtube video in the enhanced privacy mode (mandatory in the EU). That means I cannot embedd it as a video block, but need to use the following HTML:

    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/WXme-fPJoss" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Initially the video was aligned to the left of the screen, which looks awful. I could solve this by adding the following inline CSS:
    style=" display: block;".

    However the video thumbnail is still the same width as the text, despite the video size being 516×315. I think this might be due to the following CSS, which I found in the style.css file:

    /* Make sure embeds and iframes fit their containers. */
    embed,
    iframe,
    object {
    	max-width: 100%;
    	width: 100%
    }

    This means that width and maximum width are the same. Doesn’t make sense to me.
    How can I change the width so that it is taken from the iframe settings? I have tried adding custom CSS

    iframe, object {
    width: auto;
    }

    but that made it worse as now all iframes had width 300.

    The site is not public yet, thus I cannot provide a link.

    Thanks for your support!
    Wiebke

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘iframe width and alignment’ is closed to new replies.