responsive videos #2379

New Issue

OVERLORD · 2026-02-05T03:52:43+03:00

OVERLORD commented

2026-02-05 03:52:43 +03:00

Originally created by @Mo-dot2 on GitHub (Sep 3, 2021).

inserting videos (like YouTube) within bookstack pages doesn't have responsiveness
I currently assigning 300 pixels width to ensure sufficient viewing on mobiles

is there any custom HTML head content trick to enforce responsiveness?
for H5P content I use this code
<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8">

Originally created by @Mo-dot2 on GitHub (Sep 3, 2021). inserting videos (like YouTube) within bookstack pages doesn't have responsiveness I currently assigning 300 pixels width to ensure sufficient viewing on mobiles is there any custom HTML head content trick to enforce responsiveness? for [H5P](https://h5p.org/) content I use this code `<script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8">`

OVERLORD closed this issue

2026-02-05 03:52:47 +03:00

OVERLORD commented

2026-02-05 03:52:49 +03:00

@ssddanbrown commented on GitHub (Sep 3, 2021):

Hi @Haboubi92,
There's a very new CSS property which could help here: aspect-ratio. It's very new so I've been waiting for it to be more standard and supported before including in any default styles, but should work in current FireFox or Chrome browsers. The custom HTML head content for youtube would look something like this:

<style>
	iframe[src*="youtube.com"] {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
</style>

Sets all youtube embeds to be 16:9 (widescreen) aspect ratio.
Or if you want to target all embeds within page content to be the same:

<style>
	.page-content iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
</style>

@ssddanbrown commented on GitHub (Sep 3, 2021): Hi @Haboubi92, There's a very new CSS property which could help here: `aspect-ratio`. It's very new so I've been waiting for it to be more standard and supported before including in any default styles, but should work in current FireFox or Chrome browsers. The custom HTML head content for youtube would look something like this: ```html <style> iframe[src*="youtube.com"] { aspect-ratio: 16 / 9; width: 100%; height: auto; } </style> ``` Sets all youtube embeds to be 16:9 (widescreen) aspect ratio. Or if you want to target all embeds within page content to be the same: ```html <style> .page-content iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; } </style> ```

OVERLORD commented

2026-02-05 03:52:54 +03:00

@Mo-dot2 commented on GitHub (Sep 4, 2021):

thanks @ssddanbrown ♥ ♥ ♥

@Mo-dot2 commented on GitHub (Sep 4, 2021): thanks @ssddanbrown ♥ ♥ ♥

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2379