Embedded iFrame Youtube Video does not adhere to "max-width="100%" #4883

New Issue

OVERLORD · 2026-02-05T09:23:37+03:00

OVERLORD commented

2026-02-05 09:23:37 +03:00

Originally created by @JNR8 on GitHub (Jul 19, 2024).

Describe the Bug

When adding a YouTube video on a page, the video will break outside of the page boundaries if the video width is set to a dimension larger than the page width. Similarly when viewing on a mobile device the video does not adhere to max-width values regardless of the size of the videos iframe.

I have attempted to edit the iFrame using the WYSIWYG Gui and also directly using the source editor to include the max-width value within the iFrame, but these changes get removed when saving the page.

Steps to Reproduce

Create a page
add a video
set video width to any value larger than the page width
save page
observer video breaking page width.

Expected Behaviour

Video should stay within page width boundaries. I believe that this should have been resolved in #4204. Forgive me if I missing something, but this should be applied by default, or should I be doing something different to what I have explained above?

Screenshots or Additional Context

No response

Browser Details

Any Browser, Any device

Exact BookStack Version

24.05.3

Originally created by @JNR8 on GitHub (Jul 19, 2024). ### Describe the Bug When adding a YouTube video on a page, the video will break outside of the page boundaries if the video width is set to a dimension larger than the page width. Similarly when viewing on a mobile device the video does not adhere to max-width values regardless of the size of the videos iframe. I have attempted to edit the iFrame using the WYSIWYG Gui and also directly using the source editor to include the max-width value within the iFrame, but these changes get removed when saving the page. ### Steps to Reproduce 1. Create a page 2. add a video 3. set video width to any value larger than the page width 4. save page 5. observer video breaking page width. ### Expected Behaviour Video should stay within page width boundaries. I believe that this should have been resolved in #4204. Forgive me if I missing something, but this should be applied by default, or should I be doing something different to what I have explained above? ### Screenshots or Additional Context _No response_ ### Browser Details Any Browser, Any device ### Exact BookStack Version 24.05.3

OVERLORD added the 🐛 Bug 💻 Front-End labels 2026-02-05 09:23:37 +03:00

OVERLORD closed this issue

2026-02-05 09:23:38 +03:00

OVERLORD commented

2026-02-05 09:23:40 +03:00

@ssddanbrown commented on GitHub (Jul 19, 2024):

Thanks for raising @jennec, can confirm, have assigned to the next patch release.

I believe that this should have been resolved in https://github.com/BookStackApp/BookStack/pull/4204. Forgive me if I missing something, but this should be applied by default, or should I be doing something different to what I have explained above?

It should be applied by default, but that pull request would not have resolved this specific reported issue. That was targeted at actual video embeds, whereas your report if specific to iframe embeds (which just happens to be showing video).
Ultimately we should apply the same behaviour to both.

I have attempted to edit the iFrame using the WYSIWYG Gui and also directly using the source editor to include the max-width value within the iFrame, but these changes get removed when saving the page.

If you need a temporary workaround, you can add the following to your "Custom HTML Head Content" customization setting in BookStack:

<style>
.page-content iframe {max-width: 100% !important;}
</style>

@ssddanbrown commented on GitHub (Jul 19, 2024): Thanks for raising @jennec, can confirm, have assigned to the next patch release. > I believe that this should have been resolved in https://github.com/BookStackApp/BookStack/pull/4204. Forgive me if I missing something, but this should be applied by default, or should I be doing something different to what I have explained above? It should be applied by default, but that pull request would not have resolved this specific reported issue. That was targeted at actual video embeds, whereas your report if specific to iframe embeds (which just happens to be showing video). Ultimately we should apply the same behaviour to both. > I have attempted to edit the iFrame using the WYSIWYG Gui and also directly using the source editor to include the max-width value within the iFrame, but these changes get removed when saving the page. If you need a temporary workaround, you can add the following to your "Custom HTML Head Content" customization setting in BookStack: ```html <style> .page-content iframe {max-width: 100% !important;} </style> ```

OVERLORD commented

2026-02-05 09:23:42 +03:00

@JNR8 commented on GitHub (Jul 19, 2024):

Excellent. Thanks for the workaround, and the quick reply.

@JNR8 commented on GitHub (Jul 19, 2024): Excellent. Thanks for the workaround, and the quick reply.

OVERLORD commented

2026-02-05 09:23:43 +03:00

@ssddanbrown commented on GitHub (Aug 27, 2024):

This has now been addressed via 90d1223acd, which will be part of the next patch release.

@ssddanbrown commented on GitHub (Aug 27, 2024): This has now been addressed via 90d1223acd7e37f4cb5d87284e00877473aa43a6, which will be part of the next patch release.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4883