Autoscaling H5P videos

Submitted by ahsan on Mon, 07/23/2018 - 00:15
Forums: 
Showcases

Is  there a way to autoscale H5P videos according to the screen size ?

works fine with navigation panel
http://prntscr.com/k9nqtg


but when it is changed it messes up

https://prnt.sc/k9nqj3

 

size isseu

 

size working fine

 

 

Attachments: 
Image icon 21.JPG
Image icon 22.JPG
Summary: 
H5P Video scaling issue.
otacke's picture

otacke

Mon, 07/23/2018 - 09:31

Hi ahsan!

Currently, H5P tries to use the maximum width that's offered by the wrapping HTML container. The easiest way around this issue for now in WordPress probably is to have a DIV element around the H5P element.

Try switching to the text editor view of a post, and try something such as

<div style="width:100%; max-width: 500px;">
[h5p id="1"]
</div>

This example should use the full width available unless it's more than 500px.

The properties may need some tweaking depending on the stylesheet that you're using, but it should work.

Best,
Oliver