Container width and height 100%

[illycz]

Is this polyfill working when video container is set to width: 100% and height: 100%?

For example:

.video-container {
  position: relative;
  width: 100%;
  height: 100%
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Thanks

[illycz]

My fault, I used utilities which overrides polyfill inline values. Everything working as expected now.

Thanks for your work!

[bartbutenaers]

Hey Patrik (@illycz) and Constance (@constancecchen),

I don't want to hijack this closed issue, but I have a VERY similar issue. This is my code:

<style type="text/css">
  #my_div {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid red;
  }

  #my_video {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }                            
</style>

<div id="my_div" ng-init='init({"css_id": "my_video", "widgetsInfo": []})'>
     <video id="my_video" src="https://www.w3schools.com/html/mov_bbb.mp4" muted data-object-fit="fill">
          <p>Your browser does not support the HTML5 Video element.</p>
     </video>
</div>

<script src="https://github.com/constancecchen/object-fit-polyfill/blob/master/dist/objectFitPolyfill.min.js"></script>

This code snippet works fine on Chrome, so I had hoped that this nice polyfill also could display it correctly on Edge (42.17134.1.0 on Windows 10). However the parent div (with the red border) isn't filled with video:

Since Patrick's has no issues anymore, I hope I'm almost there... But do you have any clue what I'm doing wrong?

P.S. This is the result in the Edge Developer Tools panel:

<div class="ng-scope object-fit-polyfill" id="my_div" style="overflow: hidden;">
     <video id="my_video" style="left: 50%; top: 50%; width: 100%; height: 100%; margin-top: -127px; margin-left: -153px; position: absolute;" src="https://www.w3schools.com/html/mov_bbb.mp4" muted="" data-object-fit="fill">
          <p>Your browser does not support the HTML5 Video element.</p>
     </video>
</div>

Thanks !!! Bart

[illycz]

Hi @bartbutenaers, your screen is from Edge?

[bartbutenaers]

Hi @yllicz, Yes that is a screenshot from Edge. Have wasted lots of time on Edge, but can't get it running for 'some' resason :-( If you you any advice, I would appreciate it a lot... Thanks for responding!!!!! Bart

[illycz]

Yes you are right. The fill value is not working in Edge. I think it's better create specific issue for this or report it here: https://github.com/constancecchen/object-fit-polyfill/issues/42

[bartbutenaers]

Ok Patrik (@yllicz), Will do that. Thanks again for your help! Bart