The Best Way to Share YouTube Videos in Your Squarespace Blog Posts
If you are blogging with Squarespace, AWESOME!
If you are creating YouTube videos and/or tutorials and sharing them in your blog posts, even BETTER!
In this blog post and tutorial, I’m going to show the BEST way to share your YouTube videos to your Squarespace blog posts and:
Prevent visitors from getting distracted by being urged to check OTHER people’s YouTube videos
Optimize the size of your YouTube videos
Maintain full-width screen on mobile
All at the same time!
How to Share Your YouTube Video in Squarespace
There are three ways to do this, and while I’ll discuss all three, I don’t recommend using the first: Squarespace’s ‘Video’ block…but I’ll show it to you anyway for the sake of comparison.
Squarespace’s Video Block
This is the easiest way and it looks great on desktop and mobile.
In edit, add the video block
Head over to your YouTube video and select ‘Share’ and copy the URL
Head back to your website and click “+” inside the video block.
Select “Add from link”
Paste the link and save
You’ll see the video appear in the block. It looks great on both desktop and mobile, but there’s one problem.
When a visitor pauses the video or when the video is finished playing, the suggested videos that pop up on the screen are not all from your YouTube channel.
The last thing you need is for your own website visitors to be redirected to someone ELSE’s YouTube channel, and right when you have a captive audience!
So I suggest either of the following 2 methods for sharing your YouTube videos in your Squarespace blog posts.
Using the Embed Block
With this method, you’ll have to copy and edit some HTML, but it’s super easy!
You will also need to add CSS to your website to make it mobile-responsive, so read this post to the end for the code and to learn how to do that.
Head over to your YouTube video and select ‘Share' > ‘Embed’ > ‘Copy Code’
Go back to your website and in edit mode, add the Embed block wherever you want your video to appear
Select ‘Code Snippet’ > ‘Embed Data’ and paste the code
You can change the frame width and height as indicated in my YouTube tutorial above.
Within this code, you’ll see characters that look something like this:
<iframe src="https://www.youtube.com/embed/qeZeTgXQbWU"
Place your cursor between the last character and the last quote and add the following:
?rel=0
In my example, it would end up looking like this:
<iframe src="https://www.youtube.com/embed/qeZeTgXQbWU?rel=0"
Save
By adding “?rel=0,” when your visitor pauses your video or the video runs to the end, the suggested videos that pop up will all be from your own YouTube channel.
Embed a Code Block
This method is exactly the same as adding an embed block except it’s quicker.
Head over to your YouTube video and select ‘Share' > ‘Embed’ > ‘Copy Code’
Go back to your website and in edit mode, add the Code block wherever you want your video to appear
Select all the text inside the code block and paste the code you just copied from YouTube
You can change the frame width and height as indicated in my YouTube tutorial above.
Follow steps 5-8 above
*Hint: If you want your video to be centered, simply enter <center> before pasting the code.
Make Your YouTube Video Mobile Responsive
Okay, so now that you’ve optimized your YouTube videos for your Squarespace blog, you may have noticed that it doesn’t look great on mobile.
No worries! I’ve got you covered!
Head on over to Website > Website Tools > Custom CSS and paste this code:
@media screen and (max-width:767px) {
iframe[src*="youtube"] {
width: 100% !important;
height: 200px !important;
}
}
Now your YouTube Video is the perfect size on mobile!
Was this helpful?
Are you blogging on Squarespace? Do you also have a YouTube channel? Do you have any other burning questions about blogging with Squarespace? Please drop any comments or suggestions below! 👇
If you liked this post, you’ll LOVE these:
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
