YouTube shorts are growing rapidly, so it's a great place to be posting you short form video content for extra views and interaction with your brand and content.
YouTube also gives you the ability to embed videos directly into your site, but it's not always straight forward, especially with Shorts.
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 aspect 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.
You can sign up to use Clipara for free here.
Start using Clipara for free and create video experiences that delight your customers.
Get started freeIf you do want to just embed the YouTube video directly, there are a few ways you can do it with Wordpress. The standard way that we will explain first will make the video appear in landscape rather than vertical.
If you use the native Wordpress functionality for embedding YouTube videos, you might notice you get a landscape embed with space either side, which probably isn't what you want. It will look like the below.
The alternative is you right click on the YouTube short video on YouTube and copy the embed code and add that as HTML in Wordpress. The end result would be something like this:
The problem with embedding like this is the video has a fixed size. It's not responsive to different screen sizes, and if you added multiple videos, it would quickly get out of hand.
To solve this, you can instead install using the code snippet below, simply changing the ID of the video (the string after /embed/) and changing the title.
<span>
<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>
</span>
When you paste this into Wordpress as an embed, it will be fully responsive, meaning you can adjust the layout as you please, add multiple videos, and make sure the size adjusts to different devices.
You can find the ID of the video from the address bar like this:
So that's how you can add responsive, vertical YouTube short embeds into your site.
However the experience still might not be great for customers. For a better experience, custom styling, a fast website and no distracting links out to YouTube, try Clipara for free. You can create a free account here.
Here’s a step-by-step guide on how to create a custom video carousel using Clipara for free:
Step 1: Create a Campaign. Start by clicking Create Campaign on the Clipara homepage.
Step 2: Select 'On-Site' Campaign Type. Choose the on-site option to embed the carousel on your site.
Step 3: Choose the 'In-Line' Player Style. In-line plays videos directly on the page. Full-screen opens a mobile and desktop immersive player.
Step 4: Add Video. Click Upload Video to start uploading content.
Step 5: Import YouTube Shorts. Switch to YouTube, paste the link of the YouTube Short you want, and upload it. Once uploaded, you can rename the video from the YouTube URL. Once done just click Continue.
Step 6: Reorder Videos. Select all of the videos you would like to include in your carousel. Then drag and drop videos to reorder them as you like. Click Create Campaign when you're ready.
Step 7: Create a New Widget. Widgets are layouts that can be reused across campaigns.
Select Carousel for this design. 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.
Step 8: Customise the Carousel. Adjust your carousel to look exactly how you want using the design panel on the left-hand side.
Step 9: Install Your Carousel. Click Install on the upper left-hand side to get the embed code and paste it into your website builder. For a more in depth guide, check out our step-by-step guide on how to add a video carousel to WordPress.
You’ll now have a sleek, responsive video carousel across both desktop and mobile devices.
Get started with Clipara here and see how video carousels can transform your website in no time.
Start using Clipara for free and bring your site to life without slowing it down.
Get started free
