Embedded video with height of "100%" only shows half

[Kristina Hoeppner]

https://mahara.org/interaction/forum/topic.php?id=7794

The video has a height of 100% but only shows half. When I add a px height, I get the full video. Does the block not recognize percentages correctly?

<iframe src="https://media.xjtlu.edu.cn/player?autostart=n&fullscreen=y&width=0&height=0&videoId=5656&quality=lo&captions=n&chapterId=0" frameborder="0" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe>

[Kristina Hoeppner (kris-hoeppner)]

The only way to fix this at the moment without dev work is to tweak the embed code manually in Mahara with a height that would work. e.g.

Instead of
<iframe src="https://media.xjtlu.edu.cn/player?autostart=n&fullscreen=y&width=0&height=0&videoId=5656&quality=lo&captions=n&chapterId=0" frameborder="0" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe>

Recommended
<iframe width="500" height="400" src="http://media.xjtlu.edu.cn/player?autostart=n&fullscreen=y&width=0&height=0&videoId=5656&quality=lo&captions=n&chapterId=0" frameborder="0" scrolling="no" allowfullscreen></iframe>

Two ways going forward:

1. Your platform changes its code to generate height and width options that are more aligned to what other social media platforms do.

2. Mahara change to investigate: If the iframe width and height are not working, be able to override them by entering values into the width and height fields that we have rather than ignoring those fields.

[Kristina Hoeppner (kris-hoeppner)]

3. Mahara to recognize percentage and show the full video (within a predefined block height in that case, e.g. same as the width of the block?).

[Kristina Hoeppner (kris-hoeppner)]

Maybe this will be resolved on its own once we have Gridstack and can change the height of a block more easily. Will need to investigate then again.

[Ivan Barreto (ivanbarreto)]

Hi, I tried reproducing the bug today, but it seems that there is a different issue with the embedded code provided by the user on the forum.

<div style="position:relative;padding-bottom:56%;padding-top:20px;height:0;"><iframe src="https://media.xjtlu.edu.cn/player?autostart=n&fullscreen=y&width=0&height=0&videoId=5656&quality=lo&captions=n&chapterId=0" frameborder="0" scrolling="no" style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe></div>

After using the code above as an external media source, the generated block on my profile only had an empty iframe:

<div style="padding-bottom:56%;padding-top:20px;height:0;">
    <iframe scrolling="no" style="width:100%;height:100%;" allowfullscreen="" frameborder="0">
    </iframe>
</div>

I tried doing the same thing on the live mahara website, and even removing the <div> tags, but the problem persisted.

May I ask in which files the iframes are validated/edited by mahara before being displayed on the website?

Cheers