Increase Conversions with Embedded Responsive YouTube Videos in SuiteCommerce Advanced

Whether you’re showing off a new product, creating a how-to video, or just sharing a clip of your cute little animal making a fool of itself, embedding YouTube videos is a common practice and a great way to engage your audience.

This article will demonstrate how to quickly add a video to your SuiteCommerce Advanced (SCA) website using Site Management tools and make it look good on all devices with just a few lines of HTML.
 

Why use Videos

 

If videos are nowhere to be found on your site, here are a just a few reasons why you might want to jump on the bandwagon:
1.Increase conversions:
Videos on eCommerce websites have been shown to increase conversions. The statistics are all over the place but they consistently show an increase rather than decrease. Think about it, if someone’s trying to buy something online which they have never seen before, a video has the opportunity to give them the exact information or inspiration they need to buy your product.
2.Easy to share:
Increase your conversions even more by increasing “shares”. YouTube videos (and other video services) are easy to share with a built in share button. If you’ve got excellent video content, this is a nice and quick way to potentially get those social birds chirping.
3.Captivating:
Statistics also consistently show an increase in overall site engagement and browsing behavior. Customers who are on your site longer have a greater chance of finding what they’re looking for and subsequently buying your products.

 

Site Management Tools (SMT)

 

SMT is a great tool for marketers who need to make changes to the website quickly. Adding and updating embedded videos through SMT is easy and quick. If you’ve used SMT before, you can skip this section.

1 . On your Suitecommerce Advanced website, access SMT and find the page you would like to add content on and find a CMS block labeled (This Page). (If you’re featuring a product video, SCA has a CMS area built into the product page where you can easily add your content).

2. Next, you need to add some HTML to the page:

Click the Edit icon

Click the plus icon

Drag a new HTML content block into the “This Page” CMS area.

 

Embedding your YouTube video

If you are familiar with embedding YouTube videos, you can skip this section and read about making your video responsive in the next section.

  1. Now that your HTML content block is ready to go, find your YouTube video on YouTube and grab the iframe to embed:

 

  1. Paste the iframe HTML into the HTML content area on your SCA site or other CMS editor. If you’re using SMT on SCA you should have something similar to the images below.

 

  1. Finally, publish your edited page. In SMT, click the icon next to the pencil at the top of the page, then click the publish button on the right. After a few more steps your video is now embedded.

 

Making your embedded iframe video responsive

 

If you view your newly embedded video on a mobile device or small viewport on desktop, you’ll notice that the video never resizes. In fact, something like half of the video will completely flow outside of your screen. Here’s how to quickly fix this. We’ll add a div container for the iframe and add some styles to it, then add some styles to the iframe itself and then you’re done.
  1. Enter edit mode in SMT and hover over the video. Click the edit button on the top right of the video.
  2. In the HTML editor:

– Add this starting div before the iframe

<div style=”position: relative; padding-bottom: 56.25%; height: 0;”>

– Add a closing div after the iframe

</div>

– Add these styles to your iframe tag

style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;”
  1. If your final code looks similar to this, you’re video should be responsive:
<div style=”position: relative; padding-bottom: 56.25%; height: 0;”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/6hgVihWjK2c” frameborder=”0″ allowfullscreen style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;”></iframe>
</div>
  1. To finish this off, you can write some CSS classes, add them to your style sheet, then apply these classes to your div and iframe instead of writing inline styles. Next time you need to add new videos, it will be as easy as applying these classes.
.video-iframe-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class=”video-iframe-wrapper”>
<iframe class=”video-iframe”…

And that’s it. Now your videos should look great on most devices and viewport sizes.

Next, create some great content and increase your conversions.