How to correctly add a background to the left and right of the responsive video frame?

Question

css

Good working time, I didn’t succeed right away, so I want to ask narrow specialists)
There are:
1) https://jsfiddle.net/ildaroit/c7orLo22/ using materializecss
2) adaptive YouTube video in the middle of the screen with max-width / max-heigth
You need to:
1) just add wallpaper (with or without repeat-x, the background allows repeating) to the height of the video frame at the edges to the left and right of it, i.e. the height of the wallpaper should also change along with the video.
PS:
learn.shayhowe.com - here the picture on the right comes out as it should - it looks like
www.jamonit.org leaves from the side - and here they managed with one picture, which is not an option)
Thank you in advance for those who responded :)