1 Attachment(s)
Running YouTube across Variants
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: Attachment 131463
Acorn
Re: Running YouTube across Variants
Quote:
Originally Posted by
Acorn
....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.
Re: Running YouTube across Variants
Quote:
Originally Posted by
Boy
I wouldn't even dream trying this. :-)
But thanks for sharing this solution.
Me either
Re: Running YouTube across Variants
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 =D>
Re: Running YouTube across Variants
Quote:
Originally Posted by
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 =D>
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
Re: Running YouTube across Variants
Just tried that Acorn:
Quote:
javascript: void (wp.css("zIndex")==9999) ? wp.css("zIndex", 0) : wp.css("zIndex", 9999);
Still not working :(
Re: Running YouTube across Variants
Quote:
Originally Posted by
Egg Bramhill
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
Re: Running YouTube across Variants
Re: Running YouTube across Variants
Try new one browser-level lazy-loading Youtube for iframes web.dev
Re: Running YouTube across Variants
Quote:
Originally Posted by
peter777
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.