Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Lightbulb 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: JS - YouTube Handling.xar

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: Running YouTube across Variants

    Quote Originally Posted by Acorn View Post
    ....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.

  3. #3
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Running YouTube across Variants

    Quote Originally Posted by Boy View Post
    I wouldn't even dream trying this. :-)

    But thanks for sharing this solution.
    Me either
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default 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
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Running YouTube across Variants

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Running YouTube across Variants

    Just tried that Acorn:

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

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Running YouTube across Variants

    Quote Originally Posted by Egg Bramhill View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Running YouTube across Variants

    BINGO!
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #9
    Join Date
    Aug 2022
    Posts
    1

    Default Re: Running YouTube across Variants

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

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Running YouTube across Variants

    Quote Originally Posted by peter777 View Post
    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.
    Last edited by Acorn; 15 December 2023 at 08:28 PM. Reason: Corrected parameter
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •