Responsive Videos #1432

New Issue

OVERLORD · 2026-02-05T00:53:11+03:00

OVERLORD commented

2026-02-05 00:53:11 +03:00

Originally created by @lele89m on GitHub (Oct 31, 2019).

Hi everyone, i have a problem, probably this would be a "pull requests" anyway when i upload a video and insert in a page is not responsive, for example, in a phone the preview go outside of the screen

Originally created by @lele89m on GitHub (Oct 31, 2019). Hi everyone, i have a problem, probably this would be a "pull requests" anyway when i upload a video and insert in a page is not responsive, for example, in a phone the preview go outside of the screen

OVERLORD commented

2026-02-05 00:53:17 +03:00

@ssddanbrown commented on GitHub (Nov 15, 2019):

Hi @lele89m, What kind of content are you inserting? Is this a youtube video or a custom-hosted video file?

@ssddanbrown commented on GitHub (Nov 15, 2019): Hi @lele89m, What kind of content are you inserting? Is this a youtube video or a custom-hosted video file?

OVERLORD commented

2026-02-05 00:53:19 +03:00

@lele89m commented on GitHub (Nov 19, 2019):

Hi Dan, my content it's a custom hosted video.

Il ven 15 nov 2019, 21:05 Dan Brown notifications@github.com ha scritto:

Hi @lele89m https://github.com/lele89m, What kind of content are you
inserting? Is this a youtube video or a custom-hosted video file?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/BookStackApp/BookStack/issues/1760?email_source=notifications&email_token=AB65F4SCL2KS67V3UUTYEI3QT36GXA5CNFSM4JHFQONKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEGSBCQ#issuecomment-554508426,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AB65F4QCQ6NG5BIB7K4QFZDQT36GXANCNFSM4JHFQONA
.

@lele89m commented on GitHub (Nov 19, 2019): Hi Dan, my content it's a custom hosted video. Il ven 15 nov 2019, 21:05 Dan Brown <notifications@github.com> ha scritto: > Hi @lele89m <https://github.com/lele89m>, What kind of content are you > inserting? Is this a youtube video or a custom-hosted video file? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <https://github.com/BookStackApp/BookStack/issues/1760?email_source=notifications&email_token=AB65F4SCL2KS67V3UUTYEI3QT36GXA5CNFSM4JHFQONKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEGSBCQ#issuecomment-554508426>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AB65F4QCQ6NG5BIB7K4QFZDQT36GXANCNFSM4JHFQONA> > . >

OVERLORD commented

2026-02-05 00:53:23 +03:00

@ItsNoted commented on GitHub (Sep 28, 2020):

I'd like to bump this because this happens also when embedding youtube videos.

@ItsNoted commented on GitHub (Sep 28, 2020): I'd like to bump this because this happens also when embedding youtube videos.

OVERLORD commented

2026-02-05 00:53:26 +03:00

@timoschwarzer commented on GitHub (Oct 1, 2020):

@geekedtv For embedded YouTube videos, you can set the width of the iframe to 100%, for example:

<iframe width="100%" height="315" src="https://www.youtube.com/embed/eCbyqm9jcBA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

@timoschwarzer commented on GitHub (Oct 1, 2020): @geekedtv For embedded YouTube videos, you can set the width of the `iframe` to `100%`, for example: ```html <iframe width="100%" height="315" src="https://www.youtube.com/embed/eCbyqm9jcBA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ```

OVERLORD commented

2026-02-05 00:53:29 +03:00

@timoschwarzer commented on GitHub (Oct 1, 2020):

@lele89m for custom hosted videos it is almost the same, you can just set the width to 100% and the height to auto:

@timoschwarzer commented on GitHub (Oct 1, 2020): @lele89m for custom hosted videos it is almost the same, you can just set the width to 100% and the height to `auto`: ![image](https://user-images.githubusercontent.com/8849554/94795619-df10ad80-03dd-11eb-9006-d00eca3c7593.png)

OVERLORD commented

2026-02-05 00:53:32 +03:00

@Seth-AIG commented on GitHub (Feb 13, 2021):

I'm still running into issues adding a youtube video. When I try the 100% and auto as mentioned it makes the height on 150px or so. Is there a fix since this doesn't work well with iframe?

@Seth-AIG commented on GitHub (Feb 13, 2021): I'm still running into issues adding a youtube video. When I try the 100% and auto as mentioned it makes the height on 150px or so. Is there a fix since this doesn't work well with iframe?

OVERLORD commented

2026-02-05 00:53:36 +03:00

@Seth-AIG commented on GitHub (Feb 14, 2021):

I'm still running into issues adding a youtube video. When I try the 100% and auto as mentioned it makes the height on 150px or so. Is there a fix since this doesn't work well with iframe?

Using 315 for the height is a temporary fix but still not 100% beautiful.

@Seth-AIG commented on GitHub (Feb 14, 2021): > I'm still running into issues adding a youtube video. When I try the 100% and auto as mentioned it makes the height on 150px or so. Is there a fix since this doesn't work well with iframe? Using 315 for the height is a temporary fix but still not 100% beautiful.

OVERLORD commented

2026-02-05 00:53:40 +03:00

@ssddanbrown commented on GitHub (Jan 5, 2022):

My comment here is worth a read is you wanted to add something to your own instance:
https://github.com/BookStackApp/BookStack/issues/2911#issuecomment-912796188

Is a bit more complex for official support as we can't assume all certain iframes are intended to be a specific aspect ratio.

@ssddanbrown commented on GitHub (Jan 5, 2022): My comment here is worth a read is you wanted to add something to your own instance: https://github.com/BookStackApp/BookStack/issues/2911#issuecomment-912796188 Is a bit more complex for official support as we can't assume all certain iframes are intended to be a specific aspect ratio.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1432