iFrame padding/margin cannot be removed?

[bastianspirek]

I am trying to display the player with a width of 100%, however I am not able to remove the margin/padding completely. I tried using width={"100%"} and webViewStyle={{ marginHorizontal: 0, paddingHorizontal: 0}} however there will always be a white space around it. Is there anything else that I can change? I am not sure where this space is coming from.

[LonelyCpp]

Hey! Can I have a screenshot of how it looks on your device?

[bastianspirek]

Of course, there you go.

[LonelyCpp]

hmm, weird. I put in some CSS for the player to always maintain aspect ratio, which is causing the problem. I'll fix it with a patch update.

Thanks for raising the issue. I'll let you know when I'm done

[LonelyCpp]

Hey, can you try adding this -

       webViewProps={{
          injectedJavaScript: `
            var element = document.getElementsByClassName('container')[0];
            element.style.position = 'unset';
            true;
          `,
        }}

If you make sure the container expands to full width, the video player also will match the parent. (but it wont preserve aspect ratio)

[smontlouis]

The issue is with the body, it has a margin and padding by default.

[LonelyCpp]

Hi @bulby97

If you see the html here, the container has the following style -

  .container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
      }

This causes the player to fit appropriately in the view port, maintaining aspect ratio at all times. It makes sure the player doesn't overflow if the containing view is less than 400px in width. Detailed explanation here.
Removing the position attribute seems do the trick here. (player get a full 100% width but aspect ratio is not maintained)

[bastianspirek]

@LonelyCpp
Thanks, the JS injection does the trick, however I feel it's not the most elegant way, as you can even see the player loading and then adjusting the size.

But @bulby97 is right, the HTML body usually has a margin of 8px, maybe it would help to just add
body { margin: 0px, padding: 0px; } to the styles?

https://stackoverflow.com/a/13128048/6225257

[LonelyCpp]

the HTML body usually has a margin of 8px

TIL
I will try that, thanks :)

[smontlouis]

I downloaded your code on local to be able to use it and modify it. Thank you for you awesome work.

If I may give some advices:

• Put the default width / height of the webview to 16/9, so that you doesn't need to provide width and height to the webview if not needed.

• There is a screen flickering, because the iFrame take some time to load. I would recommend to maybe add a placeholder. Loading component, or alt text, in case there is no connection. In my case, I added the following:
  

[LonelyCpp]

Hey @bulby97,

I've left out the placeholder in favour or the onReady and onError callback. This allows a dev to put their own loader / placeholder / error message. This keeps the library clean and customizable.

I recommend you to handle the placeholder outside the library (maybe an opaque view over the player till onReady is fired, then fade it out using Animated).
What do you think?

[LonelyCpp]

Fixed!

[smontlouis]

Hey @bulby97,

I've left out the placeholder in favour or the onReady and onError callback. This allows a dev to put their own loader / placeholder / error message. This keeps the library clean and customizable.

I recommend you to handle the placeholder outside the library (maybe an opaque view over the player till onReady is fired, then fade it out using Animated).
What do you think?

Actually you're right mate ! Thanks.

[arfa123]

Hey, can you try adding this -

       webViewProps={{
          injectedJavaScript: `
            var element = document.getElementsByClassName('container')[0];
            element.style.position = 'unset';
            true;
          `,
        }}

If you make sure the container expands to full width, the video player also will match the parent. (but it wont preserve aspect ratio)

Thanks, you saved my time

[rameziophobia]

Hi @bulby97

If you see the html here, the container has the following style -

  .container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
      }

This causes the player to fit appropriately in the view port, maintaining aspect ratio at all times. It makes sure the player doesn't overflow if the containing view is less than 400px in width. Detailed explanation here.
Removing the position attribute seems do the trick here. (player get a full 100% width but aspect ratio is not maintained)

this works but causes a bug where returning from fullscreen ruins the video

[SufianBabri]

Thanks to @bastianspirek for their comment, I am wrapping my <iframe> in a <body> like this:

<WebView
        source={{
    	              html: `<body style="margin: 0;">
    	                       <iframe
    	                           style="border-width: 0;"
    	                           width='100%'
    	                           height='100%'
    	                           src='${pageUrl}' />
    	                     </body>`
    	        }}
/>

The body's style removes the unwanted 8px spacing, and the iframe's style removes the border around itself. Now the iframe doesn't seem to have any spaces around it.