Both videos are using the 'HTML 5 video' element. The only difference is how the caption is positioned; in flow or with the position absolute.The first video is then regarded as an 'inline' video, the next one as a background video.
A 'poster' picture has been made from the video to cover the look of the bare video player before start .The components are straightforward, easy to replicate. They work in all common browsers.
The videos can be placed anywhere on a page, also with other elements next to them.
If you change the width, please bear in mind that the videos have an aspect ratio of 16 x 9, which means that the width and height of the content-size-container has to be a multiple of 16 and 9. Here the first one has been set in %, the second one in 'vw' units and then multiplied by 3.5 to the size of 56 x 31.5.
Content-size Videos
Both videos are using the 'HTML 5 video' element. The only difference is how the caption is positioned; in flow or with the position absolute.The first video is then regarded as an 'inline' video, the next one as a background video.
A 'poster' picture has been made from the video to cover the look of the bare video player before start .The components are straightforward, easy to replicate. They work in all common browsers.
The videos can be placed anywhere on a page, also with other elements next to them.
If you change the width, please bear in mind that the videos have an aspect ratio of 16 x 9, which means that the width and height of the content-size-container has to be a multiple of 16 and 9. Here the first one has been set in %, the second one in 'vw' units and then multiplied by 3.5 to the size of 56 x 31.5.
The videos have been downloaded from Pexels.
Download the displayed component
Download the background cpmonent