Embed Showit Hosted Video in Your Showit Website in 5 Steps

Showit Tips

Do you ever get peeved by the limits of Showit’s video support? Like you can use video on a desktop canvas background but not on a mobile canvas background? You can add self hosted video to a canvas background but anywhere else you have to embed a Youtube or Vimeo video? That’s just rude!

Once you master my little trick here you will have complete freedom over video in Showit. You will be able to post BIG quality, SMALL file size video anywhere. Banish ugly, big file size GIFs forever!

The video of the Photoform* logo above? Not only is it hella cute, it’s hella small. To give you an idea, it’s 275 KB small BUT 2400 pixels wide. 275 KB? SHUT THE FRONT DOOR THAT’S TINY!

Why would I want to embed video instead of GIFs?

Have you ever run your page though a Google PageSpeed Insights? If you haven’t already, you totally should. Google throws up a bunch of suggestions for trimming the fat from your site. If your site has a lot of GIFs – you’re gonna see this in PageSpeed Insights:

Not only are large GIFs inefficient, the quality is lousy. If you want your page to shine, use video instead.

So I can use the embedded video ANYWHERE?

Yassss kween! Ready to get your nerd on? Let me walk you through the process. Firstly though, I’m no coder by any means. I really have no idea what I’m doing and usually find out solutions to things by posting in coding forums and charm coding nerds/offer sexual favours etc etc to coding geniuses until I get the solutions I need. I’ll often post my questions like this – “Please explain this like you are talking to a 5 year old” and that usually does the trick.

I knew for this to work I had to embed a video box into Showit. And the video box had to be set to Autoplay and Mute and stripped of all controls.

Armed with that challenge I headed to freeCodeCamp to get the answer.

Can I see what you’re talking about?

OMG yes – it was rude of me not to show you before. If you take a scroll through my website front page, you’ll see where I’ve embedded video.

Here’s a few examples of where I’ve used it in my site:

HERO VIDEO ON MOBILE SITE OF GIRL LAUGHING EXAMPLE

GRAPHIC OF GIRL KICKING UP HER HEELS AND LAUGHING TOWARDS END OF FRONT PAGE

Step 1 – Insert this code snippet in the page header:

It’s pretty embarrassing how little I know about coding, but this little bit of code basically makes the video that you embed size responsive:

.video-responsive{
width: 100%;
}

Just paste that little code snippet into the Custom CSS box which is in the Advanced Settings tab in your Showit page (you get to this section when you first click on a Showit page in the left of the Showit builder.

Screen shot demonstrating where to place custom CSS code in Showit page header.

Step 2 – Upload your video to your Showit media library

I don’t need to show y’all how to do that, right? Right?? Make sure the video the exact size for what you are doing with it. If you want a square video, crop the video square in Canva or Premiere Pro or whatever you use to edit video. And you want it just the right size – not too big and not too small.

The video of the logo animation above is an insane 2400 pixels wide – perfect for a full page width banner with awesome quality but only 275 KB file size. I tried to make it display that wide in this blog post but after about 2 days on forums and many tears I gave up.

Also, make sure you get the file size down as small as possible. I really love Clideo for compressing video down to crazy small sizes. You definitely don’t want a 10 Gb self hosted video or Google will put you in the naughty SEO corner.

I try and keep any video I’m using under 500 kb. Think super short clips, a few seconds at most.

Step 3 – Add an Embed Code box to your Showit page and paste this code into it:

Copy and paste this code into your Showit embed code box:

<video src="https://YOUR_VIDEO_URL_GOES_HERE.mp4" autoplay="" muted="" loop="" class="video-responsive" playsinline="">
</video>

That sexy little piece of code strips the video player of all controls, autoplays the video and mutes the video. So what your page visitor sees is a cute little piece of video that blends in seamlessly to your page. OMG, magic! The video must be muted as web browsers will not autoplay video with sound. Also, autoplay video with sound on any webpage is just wrong wrong wrong dot com.

That looks like this:

Screen shot demonstrating how to add an embed code box and paste custom code into it in Showit.

Don’t worry if the video isn’t looking quite right on the Showit page builder, when the page is published it will be right. You’ll need to make the embed box a different size for the desktop and mobile version.

Desktop: