Hi @mrstylist, a couple of things, first, I love the name and purposes of this site. My dog Rex would love it
Second, I think the approach you have taken is a good one, working with video embeds can be tricky.
Third, you might want to adjust the video-js class using custom css to exactly match the dimensions of the video embed, there is just a small amount of overflow shown on the corners when the video is displayed:
Not a big deal, but there is probably some styling solution for this, probably by adjusting the radius of the video-js object and perhaps adjusting overflow, I am checking a bit to see if I have anything to add there.
Overall, it looked fine to me when resizing, which can be one of the trickiest parts of exact placement of videos on a page.
One note, when the user plays the video, currently the video will expand to the full screen of the phone as shown:
This means that either that would have to be updated to play in place without maximizing, that is something to look into if that is not wanted.
I am checking to see if I have some further ideas on this kind of layout as I think this could be a useful tutorial.