Embedded Interactive Video - video not displaying but controls are


I have a working Interactive Video (its a test video and question)

When I embed it into my web app it does not have any height.

Here is my embed code:

<iframe src="http://www.adaza.io/training/?q=h5p/embed/2" width="688" height="448" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="http://www.adaza.io/training/sites/all/modules/h5p/library/js/h5p-resize..." charset="UTF-8"></script>

Here is what I see:


When I embed it on its own into a blank html page it works.

Are there some restrictions on how the embed code must be used?



The issue seems to be related to the display property of the parent div.

On load the div is set to "display: none;" only when the user goes to the training section do i set it to "display: block;"

if I set the div to "display: block;" on page load the video displays correctly.

I tested setting the iframe src when the iframe is set to "display: block;" and now the video loads.

tim's picture

Thanks for reporting in damo1884.