In https://www.talkgraphics.com/showthr...ot-Solved-quot, I demonstrated moving a YouTube Video to a different part of the DOM caused the video to restart.

I got round this here by only moving the video the once so it appears in all Variants.
To resize it, I have used a clever CSS scaling of width and left edge using the size unit vw.
In my design the video is half the width of the browser width (width: 50vw) and is centred (left: 25vw).
This works well for the lesser Variants, but in Main I had to set a width throttle. When the browser gets too wide, the video drifts to the left.
Feel free to fix this.

The code is a one-liner: <script>$('#wrapper').parent().appendTo('#xr_bph') .css({"zIndex": "9999", "left": "25vw", "width": "50vw", "max-width": "1440px"});</script>
The video is wrapped inside <div id="wrapper" style="position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ height: 0;">...</div>
I have used the OBJECT/EMBED tagging approach rather than VIDEO as I am working without SSL; the browser moans relentlessly in Preview with VIDEO. You need both for iPhone.

The rest of the details are in the design: JS - YouTube Handling.xar

Acorn