Guide

Creating a Twitch breakscreen with YouTube video in HTML, CSS, JS

cssjshtml

Ever wanted to know how to create a Twitch breakscreen with a YouTube background? Even if you haven’t you’re going to after reading and looking at this. The goal was to create a Twitch overlay breakscreen that has a YouTube video as a background image that is also modified by CSS to lower opacity, add blur and make it gray. One thing that isn’t always the most fun or easiest is having to open the text editor and update the source code every time you want to change something so I decided to move it over to a webbserver running CMS Made Simple.

This is the final version!

This is the final version!

What you’re going to need.

  • Webbserver (I pay 1USD a month for mine) or install on your computer with WAMP or XAMPP
  • CMS Made Simple (installed on the webbserver)
  • Text editor
  • Photo editing software
  • OBS Classic with CLR Browser (for some reason, at least for me, it won’t work in OBS Studio 100%)

Webbserver

Webbserver are dirt cheap these days and you don’t need anything big at all to run something like this. Think of it as an investment into your stream and into your future.

When you’re looking for a webbserver and you’re going to run CMS Made Simple on it you’re going to need one of these webbserver:

  • Apache 1.3
  • Apache 2
  • LightTPD 1.4+

And it needs to have at least these version installed on it:

  • PHP 5.4.11
  • MySQL 4.1

All of that is pretty standard when you buy a webbserver today so you shouldn’t need to worry but keep any eye on it. That’s really all you need to know about the the webbserver.

Installing on your computer

You don’t actually need to buy a webbserver since you can actually turn your own computer into one. All you need to install is something like WAMP or XAMPP. You’re probably also going to figure out how to configure it for you computer with ports etc. but all of that you can find on each of those websites.

Installing CMS Made Simple

It’s actually super easy and here’s a few way to upload the files to your webbserver. If you have it installed on your computer all you need to do is extract it into the folder you’ve set in WAMP/XAMPP.

After you’ve uploaded all of the files all you need to do is run the installation assistant. Does all of this sound too simple so far? That’s because it is! If you own a computer, have uploaded photos and filled out a online form this shouldn’t even feel foreign to you.

Some webbservers even have it as an express install that you can pretty much click, fill in and finish the installation in a minute. No need to upload files and all you do is fill out a form and it’s done.

Getting a text editor

You probably already have one installed on your computer and all we’re going to do is create something simple that’s really all you’re going to need. However I recommend that you get something like atom.io, allows you to code faster and actually be able to see what’s going on.

It will be able to recognize that you’re making a HTML, CSS or JavaScript (even if we’re going to make a lot of it inline) it’s a good skill to slowly learn as you start to build more and more custom things for your Twitch channel.

Photo editing software

We’re going to make this super simple for ourselves and create a lot of our assets as full images instead of coding a bunch of extra text that’s not really needed in this case. However it’s possible to replace all of the text and icons we’re going to create here in a HTML/CSS but to make it easy and fast I’ve opted to create assets in Photoshop.

Feel free to use any software that you want but personally I don’t recommend GIMP and instead I would go to something like a online photo editor like PIXLR. Everything I’m going to do in Photoshop you can do in PIXLR and it even tries to emulate the look and feel of Photoshop to begin with.

Creating Assets

We’re going to start by creating our assets in Photoshop.

Layer structure

crop1When I create something like this I work from the perspective that it’s going to end up being a website. Therefore there’s a BG (background), the JP image and aside all in separate folders.

That way I know each of the objects that I want to export. You could use the Slice Tool but in this case I just choose to export with the crop tool by cropping the aside and the background behind the JP avatar and also the JP avatar as a PNG file with a transparent background.

crop2Depending on what you’ve created you might need to export different assets. If this is the first time using and creating something like this I would keep it as simple as possible and try other things as you understand more and more of the entire concept.

Does all of this still sound super simple? That’s becasue it’s is! I’m going to keep saying that until it stops… and it probably won’t get a bit confusing until we get to the CMS Made Simple stuff and even at that point as soon as you’ve test it’s going to be… well… simple as well.

HTML/CSS

With only three files exported we’re going to start working on the HTML and CSS.

HTML5 Boilerplate/Initilizr time!

We’re going to keep it simple, the mantra of this guide, and download a pre-made grid system. There’s a ton of other grid based templates out there but I’m just used to using this one but if you find something else that works better feel free to work with that. Nonetheless what it allows us to do is to quickly work in a grid so we can add our assets in.

I like using the Bootstrap version here but exclude thins like Google Anlytics, Respond, Favicon, Apple & Windows Icons, IE Classes and Old browser warnings. Those things are really needed for what we’re going to do here anyway.

If you’re going to use CMS Made Simple you don’t need to upload this anywhere. If you’re not going to use CMS Made Simple at all you can run it from that folder but you won’t be able to have a dashboard to control it or let your mods control it.

Simple HTML

htmlNow that you’ve extracted all of the files from the boilerplate you’re going to get to see files like index.html and folder like css and img. These are the only things that you’re going to need to pay any attention to in this tutorial.

When you open up the index.html in Atom.io you’re going to get a bit of extra text from the template you should remove anything between <body> and </body>.

We’re not going to stop keeping it simple and you can see the entire code we’re going to use to your right.

The only thing here that might be a bit confusing is the YouTube embed code, but don’t worry! I’m going to go over that in the JavaScrip section since it’s linked to that more so than the HTML. For now all you need to do is add in any regular YouTube embed code with the iframe tag that you get when you click share on a YouTube video.

Remember that JP avatar I exported? As you can see it’s linked like <img alt=”jp” src=”img/jp.png”> that means it’s going to look in the IMG folder for jp.png so make sure you’ve exported your image into that folder in the boilerplate folder from earlier.

This is still very easy and simple to do, just so you know.

Alright this CSS is a bit tricky

cssIn the css folder there’s a file called main.css, this is the file that’s going to make sure it all look good and all of the background images works.

You can see the CSS we’re going to use to the right.

Important Grid things

Having the body tag at 1920×1080 isn’t 100% necessary but it helps to setup the workspace instead of working with random numbers. There’s also margin and padding properties there that you need pay attention to. If you don’t have the 0px there you’re going to end up having the workspace not being 1080p and you’re going to get a white flap on the side and things will overlap weirdly. The reason why you need to enter them is because they’re defined in the bootstrap css so we need to overwrite that.

In the HTML we defined divs with col-sm-4 and col-sm-8. That separated them into two different div/grids next to each other. It’s not a perfect fit since the width and height isn’t specified so that’s what we’re going to do here. Since this is a standalone page we don’t need to care about structuring it only for this page and can directly focus on each of them directly.

I’ve added a background color of red and blue for the sole purpose to see if something is working or if something is miss linked. If the CSS isn’t pulled they will be blank and if the images are misplaced the red/blue will only show up.

We look at the files we exported and can see that the aside is 611px wide so we add that value and we can see that the other backgroud is 1309px wide so we add that value to that. If you save and refresh your page now you’re going to see that we have created one blue and one red grid of different size.

The z-index means that they’re in different spaces on the z-axis, if we’re talking 3D. For me it’s always easier to think of them as layers and with a high number it’s further up towards the top. This is important since we’re going to do some tricks with the YouTube video to end up above the background image but beneath the JP avatar.

We’re easily going to add our background image into the workspace now by using background-image. As you can see they’re linked a bit different than what the JP avatar was in the HTML code. That’s because main.css is in a subfolder and needs to go back one step to find the img folder.

 YouTube video and filters

For our YouTube video we’re using and ID (#player) and a selector (.vidya).

The selector is where I’ve decided to put all of our filter for the video. That means that we can add things like Blur, Grayscale and Opacity without having to edit out video in any way. If you search for HTML5 Filter on google you’ll get a few more that you can play around with to get the result that you want. Exactly how we effect these from the dashboard I’ll got to later.

Let’s look at the ID of the YouTube video for a bit. This is what actually positions the video in the correct space and gives it the right dimensions.

The position here is pretty important and in this case it actually only works if we put it into it’s relative state. Z-index, as described before need to be less then the JP avatar and more then the col-md-8 div. Width and height need to be 1080p to be able to cover our entire background. The problem is that it’s not going to be centered at all so by adding the position value of “Right: 300” we move it away from the right and towards the center. If you go back and look at the col-md-8 you can see that we have “overflow: hidden;” that’s going to make it so that anything that’s larger then the background will be hidden by the background, in terms of Photoshop you’re adding a mask.

Position the avatar

If you refresh the page now you’re going to see that the JP avatar is going to be floating somewhere in the col-md-8. To fix this we add a position statement of absolute and then we can modify where in that space it should be. And lastly we set it’s z-index above the z-index for the video.

JavaScript

javascriptYou might think ooo damn now it’s too difficult. You know what this code is going to be pretty much copy and paste.

Sure we could link the JavaScript from another file but in this case, since we’re going to effect it from the CMS Made Simple dashboard, we can keep it all in line. You can see the code that we’re going to use to the right.

The only thing you need to change here is the videoID to the same as your YouTube embed code. The YouTube ID is those numbers after the “watch?v=” and can look like something like this: iqcFFYUmM9E.

We also need to look at what effect this has on our video. While it does workout out this the one thing that wouldn’t work is mute. We need to call on the YouTube API to be able to effect the mute property.

This is the code that we’re going to need:

<iframe class=”vidya” id=”player”
src=”https://www.youtube.com/embed/iqcFFYUmM9E?wmode=opaque&autoplay=1&loop=1&controls=0&showinfo=0&autohide=1&enablejsapi=1″ muted=”muted” width=”560″ height=”315″ frameborder=”0″ allowfullscreen>
</iframe>

Autoplay, starts the video without having to press play. Loop, makes the video loop. Controls, hides the controls. Showinfo, hides the info. Autohide… I don’t know. Enablejsapi, well it enables the API. Muted, this is what we wanted to reach with this and having it here makes it go silent.

There’s a few difference from a regular YouTube embed iframe code. We’ve moved the width, height, frameborder and allowfullscreen behind the video, this is for some reason important. Another important difference that you need to make sure you have is to have the /embed/ instead in front of the YouTube ID instead of whatever else you might have there.

When you have all of this you’re ready to transfer all over to CMS Made Simple or if you don’t care about the dashboard you can run it from your computer right away.

CMS Made Simple transfer

So you’ve installed CMS Made Simple and you’ve created your admin account and maybe even created a moderator account. Nonetheless at the moment that means nothing without having our site on there. There’s a bunch of different ways to get this working and I’m not going to go over them all. There’s a also a bunch of other things you can do in CMS Made Simple, from creating Global Content Blocks that you can input into any of your pages to what we’re going to do here.

File Manager

filesFirst we need to upload our images and two of your Bootstrap CSS file. The HTML file and the main.css file are both going to get re-created anyway.

You can find the File Manger under the Content tab. You should create a subfolder for your images and another one for the breakscreen. The only difficult thing about CMS Made Simple can actually be the default File Manger. You have to click on the folder icon in the top right to change directory instead of something like a back arrow or up directory. Nonetheless uploading is pretty simple by either drag and drop or from the upload tab.

When you h ave uploaded the images all you need to do is click on the image to get the URL file path. These are the ones we’re going to replace in the Template (HTML) and Stylesheet (CSS).

Templates

templateTemplates are located under Layout. You’ll get a list over a bunch of useless Templates that you’re not going to use. You can delete all of these since we don’t really care about them or keep them if you want to look into what’s possible with CMS Made Simple at a later date.

You create a new Template (HTML) by clicking on Add New Template and you’ll get a Name and a Content form. You can put Breakscreen in the name form and you can copy and paste the HTML file we created earlier.

We’re going to need to do a few modifications to it but overall it’s not going to be anything big at all.

Literal

First we need to understand what <literal> means. This code entry allows you to link in CSS and JS without CMS Made Simple mixes it up with the other things.

<literal><link rel=”stylesheet” href=”http://yourdomain.com/uploads/images/breakscreen/bootstrap.min.css”></literal>
<literal> <link rel=”stylesheet” href=”http://yourdomain.com/uploads/images/breakscreen/bootstrap-theme.min.css”></literal>

As you can see I’ve put the two boostrap CSS files we uploaded earlier in side of these <literal> tags. This was CMS Made Simple will be able to read them in as they would a regular HTML document. These replaces the ones we already have there from our HTML document.

Before we add in the actual CSS we need to make sure that we replace our main.css with this {cms_stylesheet}. Replace the entire <link rel=”stylesheet” href=”css/main.css”> line with {cms_stylesheet} and CMS Made Simple will pull in the CSS we define from within instead.

We also need to do the same thing around our inline JavaScript hat we created. All you need to do is slap the <literal></literal> around the <script> tags. It would look something like this <literal><script>Here’s the JavaScript code</script></literal>.

We’re going to add in a bit more but we will come back to that after we’ve added the CSS in Content Blocks.

Stylesheet

css2Under Layouts we can get to our Stylesheets. If this is a fresh install you’re going to see a long list of pre-made CSS files. Click on “Add a Stylesheet” to create a new CSS file and again all we do copy and paste the CSS from the main.css we created on our computer. Give it a name and click save, you’re going to use this name later.

The only thing we need to do is to change the URL for the images in the background with the ones we uploaded in the File Manager. Click on them in the File Manger and copy the URL replace the “../img/bg2.png” with the new URL.

To attach the CSS to the template we need to go back to our Template list. To the far right there should be a icon that says CSS and when you hover over it says Attach Stylesheet, click that and select the Stylesheet you created in the drop down menu, and click on Add a Stylesheet. You’re stylesheet is now attatched to the template.

Content blocks

These blocks are what allows us to change the site from a dashboard instead of having to edit code and upload the new code. Here’s a what we’re going to do to be able to change the blur, opacity and greyscale from the dashboard. As you can see below this is CSS but we’re going to add it into our Template (HTML).

<style>.vidya {
-webkit-filter: blur({content block=”blur” label=”Blur Amount from 1 and up, leave empty for no blur” oneline=true}px) grayscale({content block=”blackwhite” label=”Grey On=1 Off=0″ oneline=true}) opacity(0.{content block=”opacity” label=”Opacity 0=100%, 1=10%, 2=20%…” oneline=true});
}
</style>

The reason for this is that content blocks can’t change the CSS so we need to make this CSS inline. It’s pretty straight forward when we start to look at the new code. What we’re going to do is replace each of the values in our filter “blur(0px) grayscale(1) opacity(0.1);”. We take {conten block=”blur”} and replace the number that we want to change. The we add in {conten block=”blur” label=”Blur Amount”} so in the dashbaord we can see what is that we’re doing. Finally we add {conten block=”blur” label=”Blur Amount” oneline=true} at the end so it doesn’t appear as a box but rather just one input field. We do this for all of the values that we have. We give them different names and labels or else it won’t work.

Now we need to do the same thing to your YouTube video. We need to do this both for the embed code but also for the JavaScript code. All we do is put this code {content block=”youtube” label=”YouTube Video Code Again” oneline=true} instead of the YouTube ID that is in the JavaScript and in the embed code.

We’re almost done! You also need to add a {content} tag somewhere. This is a bit stupid but it has to be there. You can put it where ever you want in the code since it’s not going play any part in what we do. What it does do however is allow you to enter text in that space but we’re not going to do that here anyway.

Page aka Dashboard

pagesNow all we need to do is create the page itself or in a sense create or dashboard for this.

By going to Pages under the Content tab we can add a new page at the bottom by clicking Add New Content. This bring up a new page but first we need to go to the options tab and select the Template that we created earlier. When that’s done we can go back to the main and you’ll see that you have 5 new fields and a large text field as well (that you can ignore).

First you have a way to enter title and menu text, you can put whatever you want there.

After that you have the 5 fields that we created in your template. First we have our blur, grey and opacity values and after that we can enter the YouTube code. Click save and you now have a moving YouTube background for your breakscreen.

Adding more!

You can now add in things like countdowns, that you can set with Global Content Blocks or have other moving content on top of this. The possibilities are endless now that you have a CMS/dashboard where you can control and a coded backend where you can create new things.

OBS and CLR Browser issues

 

I’ve tested this solution in OBS Classic and OBS Studio. While it works in both programs one issue that keeps coming up is that when you run it the first time after starting up OBS it will still play the audio. You need to open up the dialog for the global source and hit OK again (no need to change any settings) and after that it will work again.

In OBS Studio when you exit the program is also crashes so I would test it out before doing too much with it in that program. There will be a crash log file that I haven’t taken time to investigate since the client only uses OBS Classic so if you want to you can check that out and write an article on how to fix that… oh and please let me know as well since that would be awesome to learn.


Damn this is a long guide but I hope you can use it to create your own HTML/CSS/JavaScript breakscreen. Keep learning and keep adding things to it and do share the things that you come up with. If you have any questions feel free to add a comment or ask me on Twitter! I’m sure there’s going to be a lot of questions and things that might not work but my door is always open so drop me a message if there’s any issues!

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close