My flex-item containing a video player doesn't respect flex-basis value


I’m integrating a custom video player made by Flowplay.

Here is my read-only link with several attempts.

I had prepared a flexbox in a class name “columns” and two combo classes for its (flex-)children, respectively .column.width-44% and .column.width-56%. When enough space is given, there is two columns, but if the video player would be below 560px, it takes a second row instead. It was working perfectly with a placeholder image (see first section*).

However, when I pasted the new video player (second section*), it took the whole width. It still does when I set “Grow” to 0.

I used another video player made by Flowplay, an iPhone one, and this times, it takes the desired width. However, it works with the iPhone picture and if I delete it, the player’s height becomes 0.

I’m wondering how to edit the first video player for it to behave like the second version.

Thank you!

*Edit: after hero section.

OK, I found a workaround by replacing the iPhone image with a div with the ratio property set to 16:9. However, I’m very stubborn and I still want to know why the first player takes a width of 100%.