I have successfully created a responsive video for my website and wrapped text around the video, but now I'm struggling to make them work together seamlessly.
My ideal scenario is:
For the desktop version:
To look like this: Mobile version
The best solution I've come up with so far is having the content stack on top of each other or the text wrapping around the video not stacking. How can I achieve both simultaneously?
Everything must be done inline using HTML and CSS only because it needs to integrate into my POS system, which has limited capabilities.
<div style="max-width:1000px; width:100%;font-size:0px;">
<!--VIDEO-->
<div style="float:right;width:100%; max-width:450px; display:inline:block;">
<div style="width:100%;position:relative; padding-bottom:56.25%; height:0px;">
<iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" height="441" width="480" src="[VIDEO SOURCE]" frameBorder="0" allowfullscreen></iframe>
</div>
</div>
<!--END VIDEO-->
<p style="font-size:20px; width:100%; max-width:550px; display:inline-block; vertical-align:top;">TEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE... (continues) ...HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE
</p>
</div>