Responsive design YouTube Extension

[joppehoekstra]

What problem are you facing?

The current YouTube extension provides users with the option to provide the size of the iframe. However, this is not a great experience on differently sized screens, because that causes the dimensions to change. Since the dimensions of YouTube videos stay the same, the dimensions of the iframe should stay the same too.

What’s the solution you would like to see?

For example, add a class to the div around the iframe, which can be styled to make the dimensions stay the same (and add an example to the documentation). This leaves it up to the developer what solution fits best in their application.

<div class="responsive-video">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/XYZ" title="YouTube video player"></iframe>
</div>
<style>
.responsive-video{
position: relative;
padding-bottom: 56.25%;
height: 0;
}
</style>

What alternatives did you consider?

Allow the user to select a dimension, so that the right class is automatically applied.

Anything to add? (optional)

No response

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[bdbch]

Good idea!

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[beocaca]

hello, any solution for this plesase?!

[tarek-89]

adding a tailwind Aspect Ratio classes will be nice w-full aspect-video md:aspect-square

or allow to add custom class to the iframe itself

[philmetzger]

adding a tailwind Aspect Ratio classes will be nice w-full aspect-video md:aspect-square

or allow to add custom class to the iframe itself

Yeah that would be nice. Currently I did it this way:

div[data-youtube-video] > iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

[hi-reeve]

allowing to input string as width is a good idea. my case is showing the embedded video on mobile apps, which have so many width and aspect ratio, so manually set the output is the only way. just in case there is people need a way like me

   if (editorHtml.includes('iframe') && !editorHtml.includes('style')) {
            editorHtml = editorHtml.replace(
                /<iframe/g,
                '<iframe style="width: 100%;aspect-ratio: 16 / 9"',
            );
        }

[bdbch]

You can define the class / other attributes on the HTML elements.

Youtube.configure({
  HTMLAttributes: {
      class: 'my-iframe-class',
  },
})

[LazAustin]

For anyone who cares, this is the solution that worked best for me.

I didn't touch the jsx, but added the following code in my TipTap.css

I don't remember, what the recommended or default CSS was, but the key here that solved my problem was a simple max-height in some @media screens that I added. This worked on pretty much every test screen size I tried. I think it should work for most other use cases as well with some slight adjustments to the numbers.

iframe {
    border: 8px solid #000;
    border-radius: 4px;
    min-width: 200px;
    min-height: 200px;
    display: block;
    outline: 0px solid transparent;
  }

  div[data-youtube-video] > iframe {
    cursor: move;
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .ProseMirror-selectednode iframe {
    transition: outline 0.15s;
    outline: 6px solid #fbbf24;
  }

  @media only screen and (max-width: 480px) {
    div[data-youtube-video] > iframe {
      max-height: 50px;
    }
  }

  @media only screen and (max-width: 720px) {
    div[data-youtube-video] > iframe {
      max-height: 100px;
    }
  }