Support » Theme: Editor Blocks » iframe width and alignment

  • Resolved wiebke.wetzel


    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="" 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. */
    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!

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