Add [object-fit-polyfill] library in [Varbase Core] to support IE 9+, iOS 7-, and Android 4.4 (Image, Video, YouTube, Vimeo) Object-fit

Thanks Odai for reporting,

I like your proposed resolution, agree on that.

I think this will support a better revamped change for Chrome, FireFox, Opera, .. ext
on Iframes too.

We may go for this change in a new 8.x-8.x branch not to affect old projects

Feedback by Mohammed J. Razem

Add the [object-fit-polyfill] library to Varbase core

bare-bones demo here

https://constance.dev/object-fit-polyfill/demo/

• Lightweight - 3KB (2KB with the basic version)
• Vanilla Javascript - works with or without jQuery
• Supports IE 9+, iOS 7-, and Android 4.4-
• Supports `object-position`
• Works with `img`, `picture`, `srcset`, `video`, and `canvas`
• Plug and play - just include the .js file and set data attributes on your elements.
• Note: This plugin makes the assumption that the parent container is acting as a picture frame, and already has a height & width set.

Having a look at
https://git.drupalcode.org/project/drupal/blob/8.8.x/core/core.libraries...

Calling with object-fit-polyfill

    - core/matchmedia
    - core/picturefill

picturefill:
  remote: https://github.com/scottjehl/picturefill
  version: "3.0.1"
  license:
    name: MIT
    url: https://github.com/scottjehl/picturefill/blob/3.0.1/LICENSE
    gpl-compatible: true
  js:
    assets/vendor/picturefill/picturefill.min.js: { weight: -10, minified: true }
  dependencies:
    - core/matchmedia

Thanks, Odai for discussing and the quick reply in person

Agreed on the following:

In Varbase core we will have the library and it will be disabled.

no page attachment hook

and only

object-fit-polyfill:
  remote: https://github.com/constancecchen/object-fit-polyfill
  version: 2.x
  license:
    name: MIT
    gpl-compatible: true
  js:
    /libraries/objectfitpolyfill/dist/objectFitPolyfill.min.js: { minified: true }
  dependencies:
    - core/matchmedia
    - core/picturefill

And release Varbase core

Then in the following Varbase components:

• Varbase Media Hero Slider
• Varbase Media Header
• Varbase Layout Builder

The library will be called in each needed background library as a dependency and add the following in its JavaScript behaviours

objectFitPolyfill($('MODULE_SELECTED_BACKGROUND_MEDIA_VIEW_MODE video/image/picture'));
$(window).on('resize', function(){
  objectFitPolyfill($('MODULE_SELECTED_BACKGROUND_MEDIA_VIEW_MODE  video/image/picture'));
}); 

Add to that the change in CSS for Varbase Media Hero Slider and Varbase Media Header to work in the way Razem had for us in Varbase Layout Builder