Fix background media supports in [Varbase Media Header] for IE 9+, iOS 7-, and Android 4.4 (Image, Video, Video, YouTube, Vimeo) Object-fit

Problem/Motivation

Background media not covering the content in appropriate way as it appear scaled up and not centered, this issue appear for all types (image, remote video, local video).

Proposed resolution

Using CSS object-fit property to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

Also, it's better to use object-fit-polyfill (polyfill for browsers that don't support the object-fit CSS property) for old browsers as it supports IE 9+, iOS 7-, and Android 4.4.

Test Varbase Media Header page - Image

Click to watch the video

Test Varbase Media Header page - Local Video

Click to watch the video

Test Varbase Media Header page - Remote Video Vimeo

Click to watch the video

Test Varbase Media Header page - Remote Video Youtube

Click to watch the video

Test Varbase Media Header page - Standard

Click to watch the video

Test Varbase Media Header page - Media Header but no media

Click to watch the video

Tablet sizes

Mobile sizes