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
Quote:
<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! :)
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!
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
Re: Embedded Twitch Video Placeholder with Variants
Acorn, I don't believe the 'better written' part. ;)
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.
