Resize embedded iframes

Submitted by marthe on Wed, 02/21/2018 - 11:50
Forums: 
General discussion

Hi!

I am quite new with H5P, and this is sort of two questions in one.

I am building a website with a series of interactive videos. The videos does not have the same size or aspect ratio.
I need to be able to resize the H5P iframe once I have embedded them, but it looks like the size is somehow hard wired into the iframe.

Also, how do I tell H5P (in wordpress) that a replaced video has a different size? I first uploaded a test video, then I shrinked the video and replaced it within the interactive video. The problem is that it still keeps the size from the first video. If it's possible to resize iframes, this is not a problem.

Example page: http://www.acm.no/test/valhall/

Thanks in advance!

Marthe

Summary: 
Iframe resize
Content types: 
Interactive Video
BV52's picture

BV52

Wed, 02/21/2018 - 12:50

Hi marthe,

 

The easiest way is to use a PHP hook, to add your own CSS-file to the content type. Please visit the Visual Changes page for more details.

 

-BV52

marthe

Wed, 02/21/2018 - 13:02

I seem to have found a workaround for it. Currently tested with 5 objects.

I have a class with !important max-width and max-heigth for every iframe.
Then I have one array with the classes and one array with the videos.

Here's the code:

function nextIfr(){
    var xfr = document.getElementById("ifr");
    if(setW == ifrSrc.length-1){
        setW = 0;
        xfr.src = ifrSrc[0];
        $('#ifr').removeClass(classes[setW-1]).addClass(classes[0]);
    }else{
        setW = setW+1;
        xfr.src = ifrSrc[setW];
        $('#ifr').removeClass(classes[setW-1]).addClass(classes[setW]);
    }   
}
    
function prevIfr(){
    var xfr = document.getElementById("ifr");
    if(setW == 0){
        $('#ifr').removeClass(classes[setW]);
        setW = ifrSrc.length-1;
        xfr.src = ifrSrc[ifrSrc.length-1];
        $('#ifr').addClass(classes[setW]);
        
    }else{
        $('#ifr').removeClass(classes[setW]);
        setW = setW-1;
        xfr.src = ifrSrc[setW];
          $('#ifr').addClass(classes[setW]);
    }   
}

marthe

Wed, 02/21/2018 - 13:02

I seem to have found a workaround for it. Currently tested with 5 objects.

I have a class with !important max-width and max-heigth for every iframe.
Then I have one array with the classes and one array with the videos.

Here's the code:

function nextIfr(){
    var xfr = document.getElementById("ifr");
    if(setW == ifrSrc.length-1){
        setW = 0;
        xfr.src = ifrSrc[0];
        $('#ifr').removeClass(classes[setW-1]).addClass(classes[0]);
    }else{
        setW = setW+1;
        xfr.src = ifrSrc[setW];
        $('#ifr').removeClass(classes[setW-1]).addClass(classes[setW]);
    }   
}
    
function prevIfr(){
    var xfr = document.getElementById("ifr");
    if(setW == 0){
        $('#ifr').removeClass(classes[setW]);
        setW = ifrSrc.length-1;
        xfr.src = ifrSrc[ifrSrc.length-1];
        $('#ifr').addClass(classes[setW]);
        
    }else{
        $('#ifr').removeClass(classes[setW]);
        setW = setW-1;
        xfr.src = ifrSrc[setW];
          $('#ifr').addClass(classes[setW]);
    }   
}
icc's picture

icc

Thu, 02/22/2018 - 14:21

Do you mean that they should all have the same height? 
The default is that the width is the same and that the height changes according to the video.

There are a few things you can try:
1. You can find the width/height ratio of your container and then reduce/increase the width of the container to achieve the height you want. Though, this implies that the width is variable. (instead of the height) 
2. If your container has a static size you may want to find a way to "simulate" the CSS rules that are used for fullscreen. As you can see in fullscreen the video always fit inside the given container(the screen), adding black padding around it.