Everybody loves short-form, mobile-focused video now. And YouTube is obviously a great place to be posting your content for views and engagement.
You might decide that you want to bring your YouTube shorts onto your website. The beauty of a short video is it's snappy and to the point, so you put a bunch of different videos together.
Doing that with shorts isn’t that simple though. There are a few problems:
You can fix all of that by using a specialist video embedding software like Clipara. Purposefully built for short form content.
You can create carousels, grids, or embed individual videos with your own custom styling, full-screen mobile experiences (just like being in an app), smooth changeovers between videos, and much more. It’s incredibly simple to use too, and covers all aspects of making videos responsive across devices, autoplaying, muting etc.
With that, you can easily carousels that open to a full-screen player like this:
or experiences that play in line like this one:
All of this is completely customisable without any code and has lots of other layout and customisation options. The end result is something much more professional than embedding lots of YouTube shorts.
Start using Clipara for free and create video experiences that delight your customers.
Get started freeIf you do just want to grab the embed code for YouTube shorts and put it straight into your site and leave it as a YouTube embed, you can do so with the quick steps below.
The embed code for a YouTube short is actually quite simple to find. In YouTube, just right click on the Shorts video, and select ‘Copy embed code’.
You can then paste it into the embed functionality on your site.
Clicking copy will give you a piece of code like so:
<iframe width="379" height="674"
src="https://www.youtube.com/embed/CjO9JVlbQSM"
title="Olivia Dean - felt like a fluffy dream !!! #shorts"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
Although the embed style is vertical, one thing you'll noticed about the embed code above is that it has a fixed size. The Embed has a fixed width of 379 px and height of 674 px. You can change those two numbers to reduce the size of the video. This fixed size in particular you may find is slightly too large for some mobile devices.
If you already have the YouTube embed code, you can also just take the video ID from the end of the URL in the address bar and replace it in the embed code.
You may also want to make the embed responsive. This means it will adapt to the screen size and fill the space that it's in. This gives you much more control over the size of the embed when embedding into website builders like Wordpress, Squarespace, Wix, Framer and others. We've got some extra help for how to do that below:
To make your YouTube embed code responsive so that it fills the space it is put in, you'l need to add some additional styling code. The code below is important to maintain the 9:16 dimension of a YouTube short. Other responsive embed codes will use the standard 16:9 dimensions. Simply take this and replace the video title and Youtube video ID after /embed on the YouTube URL
<style>
.video-wrapper {
position: relative;
width: 100%;
/* The padding-top percentage is calculated as (height / width) * 100% for a 9:16 ratio */
padding-top: 177.77%; /* (16/9) * 100 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/CjO9JVlbQSM" title="Olivia Dean - felt like a fluffy dream !!! #shorts" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
If you're looking at how to add this code to a specific website builder, we have some specific guides here:
All in all, adding it to your site is pretty quick, but just using the YouTube embed isn't a great experience for your customers. So give Clipara a try with a free account and create a much better experience for your customers. You can create a free account here.
Below is a guide on how to create and install a simple responsive carousel with Clipara for free:
Follow the steps below to quickly create a custom video carousel for your website using YouTube shorts.
Click create campaign from the Clipara homepage:
Select the 'On-site' campaign type:
Choose the 'In-Line' player style. Full screen will open a full screen player on mobile and desktop rather than playing in-line in the page:
Click 'Add Video' to add new content:
Toggle to YouTube to add your YouTube content and paste the link of the YouTube short you want to add then click upload:
Once uploaded, you can rename the video from the YouTube URL. Once done just click continue:
Select all of the videos you would like to include in your carousel. On the left, drag them to reorder them if you want to. Once selected, click 'Create Campaign' in the top left:
Select to create a new widget. Widgets are layouts that can be reused across multiple campaigns once you have designed them:
Select 'Carousel'. This is the only layout style for In-line campaigns, but for campaigns that open to full screen, you can use grids, carousels, stories, pop-ups and create your own custom embeds.
You can now edit your carousel to look exactly how you want using the design panel on the left hand side.
Once you've completed all of your customisations, click install in the top right:
You'll now have the code to install on your site. Simply copy that and paste it into your website builder.
You'll now have a slick video carousel on both desktop and mobile, just like this:
You can get started using Clipara for free here.
Start using Clipara for free and bring your site to life without slowing it down.
Get started free
