Running YouTube across Variants

[Acorn]

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

[Boy]

....When the browser gets too wide, the video drifts to the left.
Feel free to fix this.
.....

I wouldn't even dream trying this. :-)

But thanks for sharing this solution. Too bad that Xara doesn't make an effort to tackle the issue.

[wizard509]

I wouldn't even dream trying this. :-)

But thanks for sharing this solution.

Me either

[Egg Bramhill]

Works excellently Acorn. 1 point (as always), toggle video just leads to [object Object] in Firefox. Not that I'd worry as I'd never use toggle video.
I'm glad you understand this stuff. Saved in my goodies folder

[Acorn]

Works excellently Acorn. 1 point (as always), toggle video just leads to [object Object] in Firefox. Not that I'd worry as I'd never use toggle video.
I'm glad you understand this stuff. Saved in my goodies folder

Cheers Egg, for FF add void just after javascript: in the link followed by a space; it should then work.

I only tested in Chrome and Edge.

Acorn

[Egg Bramhill]

Just tried that Acorn:

javascript: void (wp.css("zIndex")==9999) ? wp.css("zIndex", 0) : wp.css("zIndex", 9999);

Still not working

[Acorn]

Just tried that Acorn:
Still not working

Egg, what does work in FF is javascript: void ((wp.css("zIndex")==9999) ? wp.css("zIndex", 0) : wp.css("zIndex", 9999));
Wrapping void around the other code within brackets.

Acorn

[Egg Bramhill]

BINGO!

[peter777]

Try new one browser-level lazy-loading Youtube for iframes web.dev

[Acorn]

Try new one browser-level lazy-loading Youtube for iframes web.dev

Peter, welcome to TalkGraphics.

I have allowed your link as it is a useful inclusion.
I will be adding loading="lazy" to my IFRAMES from now.

This might not work for those in pop-up layers.
It requires "display: none or visibility: hidden applied."
Just checked and it works fine!

The lazy loading is browser-level and not just for YouTube.

It really help if you include such detail in your Post; it saves guessing.

Acorn

UPDATE
When running in a pop-up layer, closing and re-opening resets the video to its original start point.