Welcome to TalkGraphics.com
Results 1 to 5 of 5
  1. #1
    Join Date
    May 2018
    Posts
    2

    Default Embedded Twitch Video Placeholder with Variants

    Hello all! New to the forums and the program. You can find my current website at http://www.beardedspider.photos/ for reference.

    I have inserted an embedded twitch.tv video for my channel into my site (here) which works on this main variant of the site (960px). However, it seems it can't be live shared across variants and when I create a new placeholder with the same code (size adjusted for variant size), they all appear on the same (960px width/original) variant, but do not show on the other size variants I created (whether previewed or published).

    I reduced the variants just down to the two for now until I figure this out (480 for mobile, 960 for else). I also removed the embed from the mobile variant for now so there aren't two video players going on at once.

    embed code for reference
    <html>
    <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
    new Twitch.Embed("twitch-embed", {
    width: 960,
    height: 575,
    channel: "thebeardedspider"
    });
    </script>
    </body>
    </html>
    Twitch embed and api support pages -> Here

    Thanks for any help with this matter!

  2. #2
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Embedded Twitch Video Placeholder with Variants

    Welcome to TG!
    First you will have to remove the first two and last two lines from your placeholder. The placeholder code goes to the body already.
    Then you will have to give unique IDs to the DIVs that are used for emedding and also use that unique IDs in the scripts.
    And I am quite sure you should only include the javascript file https://embed.twitch.tv/embed/v1.js once.
    For example in the placeholder at the main variant add the following code to the head:
    Code:
    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    Change the body code to:
    Code:
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed-main"></div>
    
    <!-- Create a Twitch.Embed object that will render within the "twitch-embed-main" root element. -->
    <script type="text/javascript">
    new Twitch.Embed("twitch-embed-main", {
      width: 960,
      height: 575,
      channel: "thebeardedspider"
    });
    </script>
    And on the mobile variant add a placeholder with only body code:
    Code:
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed-mobile"></div>
    
    <!-- Create a Twitch.Embed object that will render within the "twitch-embed-mobile" root element. -->
    <script type="text/javascript">
    new Twitch.Embed("twitch-embed-mobile", {
      width: 480,
      height: 288,
      channel: "thebeardedspider"
    });
    </script>
    The size for the mobile variant might differ in your case off course.
    This is all just a guess!

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: Embedded Twitch Video Placeholder with Variants

    Siran, my exact words - but better written.

    I hadn't got to the point of deconstructing the Embed function, holding the ID parameter.

    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

  4. #4
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Embedded Twitch Video Placeholder with Variants

    Acorn, I don't believe the 'better written' part.

  5. #5
    Join Date
    May 2018
    Posts
    2

    Default Re: Embedded Twitch Video Placeholder with Variants

    That's what did it! Thank you very much for your prompt help! It now works exactly how I want it to.

 

 

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
  •