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

[JNR8]

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

[ssddanbrown]

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

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?

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>

[JNR8]

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

[ssddanbrown]

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