iframe-resizer Fail to resize width properly

Describe the bug When configuring with sizeWidth true, it fails to set the width properly after resize.

The follow example show a iframe embed with youtube, which is at the center but after go into fullscreen and back, it fails to determine the width properly.

To Reproduce Steps to reproduce the behavior:

Go to the html
Click on youtube Fullscreen
Go back to normal screen
The width will be extended

Before press fullscreen before

After press fullscreen and back to normal screen size Expected the video is at middle and width is the same as before fullscreen after

Expected behavior Expect the width to be same after quit from youtube fullscreen.

My code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iFrame test</title>
  </head>

  <body>
    <div style="text-align: center;"><iframe id="myIframe"></iframe></div>
    <div id="callback"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.js"></script>
    <script type="text/javascript">
      const iframe = document.getElementById('myIframe')
      function addScript(html) {
        return `${html}<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.js'><\/script>`
      }
      const htmlCode = `<iframe width="560" height="315" src="https://www.youtube.com/embed/5Peo-ivmupE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
      iframe.setAttribute('srcdoc', addScript(htmlCode))

      iFrameResize({
        log: true,
        sizeWidth: true,
        onResized: function(messageData) {
          document.getElementById('callback').innerHTML = 
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Height:</b> ' +
              messageData.height +
              ' <b>Width:</b> ' +
              messageData.width +
              ' <b>Event type:</b> ' +
              messageData.type
        }
      }, iframe)
    </script>
  </body>
</html>

Additional context I have tried to investigate the issue,

when back from fullscreen to normal screen during resize events, the iframe parent width is still the previous set width(i.e fullscreen width) and thus content iframe body width will be the parent width.(i.e no change in width)

P.S. since we may have dynamic html code and thus to use srcdoc to support those dynamic context with different scripts or div.

Jul 29 '20 10:07 thomas-lee

I expect their is another event we should be listening for to detect that the iframe is no longer in full screen mode.

Jul 29 '20 11:07 davidjbradshaw

Thanks for your reply, since we hope to support dynamic html code(not only youtube), so we can't simply listen to fullscreen event or not.

I am not quite sure if the flow is correct.

if we can remove the parent iframe inner css width style before sending resize message to the child, then child won't be affected by the parent width and return the inaccurate(inherited) width.

Thanks a lot

Jul 29 '20 12:07 thomas-lee

You could just turn off resizing before going full screen and turn it on again when you come out of full screen

Jul 29 '20 22:07 davidjbradshaw

iframe-resizer iframe-resizer copied to clipboard

Fail to resize width properly

iframe-resizer
iframe-resizer copied to clipboard