search

BookStackApp / BookStack

A platform to create documentation/wiki content built with PHP & Laravel
https://www.bookstackapp.com/
MIT License
15.28k stars 1.9k forks source link

Responsive Videos #1760

Open lele89m opened 5 years ago

lele89m commented 5 years ago

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

ssddanbrown commented 4 years ago

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

lele89m commented 4 years ago

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 .

ItsNoted commented 4 years ago

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

timoschwarzer commented 4 years ago

@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 4 years ago

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

image

Seth-AIG commented 3 years ago

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 3 years ago

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.

ssddanbrown commented 2 years ago

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.