Introduction
Embedding YouTube videos on your WordPress site is a fantastic way to engage readers, keep visitors on your page longer, and improve your overall SEO. While WordPress offers a simple copy-and-paste method for embedding videos, sometimes you need a bit more control—like custom sizing, removing related videos, or adding specific parameters. In this tutorial, you’ll learn how to use YouTube’s “Share → Embed” code with a Custom HTML block to embed videos precisely the way you want.
Why Manual Embedding Is Worth It
- Advanced Customization: You can directly edit the
<iframe>
code to manage autoplay, remove related videos, or change the default size.
- Better Control Over Page Layout: Want a consistent video width or specific placement? Customizing the HTML code makes it easy to align your video with your site’s design.
- Fallback for Theme/Plugin Issues: Sometimes, WordPress themes or plugins can conflict with the auto-embed feature. A manual embed ensures you can display videos no matter what.
Step 1: Get Your YouTube “Share → Embed” Code
- Visit the Video on YouTube: Make sure you’re on the main watch page for the YouTube video you want to embed.
- Click “Share” Under the Video: You’ll see a pop-up with various sharing options.
- Select “Embed”: This will reveal an
<iframe>
code. Here, you can also adjust a few default settings (like whether to embed player controls or show captions).
SEO Tip: Use a relevant video title in your YouTube description and tags. This helps search engines better understand your content.
Step 2: Copy the <iframe>
Code
After you click “Embed,” a box will appear with code that looks similar to this:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Highlight and copy everything between the opening <iframe>
and closing </iframe>
tags.
Step 3: Add a Custom HTML Block in WordPress
- Open Your Post or Page: In your WordPress Dashboard, click on Posts (or Pages) and then Edit next to the content you want to modify.
- Insert a Custom HTML Block: Click the + icon to add a new block in the Gutenberg editor. Search for “Custom HTML” and select it.
- Paste the
<iframe>
Code: In the empty Custom HTML block, paste the code you copied from YouTube.
Example:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Step 4: Customize Your Embed (Optional)
If you need more control, edit the <iframe>
attributes:
- Disable Related Videos: Add
?rel=0
to the end of the YouTube URL (e.g., https://www.youtube.com/embed/VIDEO_ID?rel=0
). This helps keep users focused on your content rather than recommended videos.
- Set Specific Width/Height: Update the
width
and height
values to fit your layout (e.g., width="800"
and height="450"
).
- Enable Autoplay & Mute: Use parameters like
?autoplay=1&mute=1
to start the video automatically without sound (helpful if you want to feature a silent video loop).
Note: Be mindful with autoplay if you value user experience—unexpected audio can negatively impact visitor engagement.
Step 5: Preview and Publish
Once your <iframe>
code is in place, click on Preview (or Preview in new tab) to check how your video looks. If everything appears correct:
- Click Publish or Update to make your changes live.
- Test the embedded video on different devices to ensure it displays correctly and remains responsive.
SEO Tip: Add a brief text introduction above the video summarizing its content. This helps both users and search engines understand the context of your video.
SEO Best Practices for Embedded Videos
- Use Descriptive Headlines: Make sure your blog post title and headings include relevant keywords like “Embed YouTube Video” or “Custom HTML Block.”
- Optimize Text Content: Provide a summary or transcript of the video in the post. Search engines can’t read video content, so having text is crucial for SEO.
- Responsive Design: Ensure your
<iframe>
is responsive. Many modern WordPress themes handle this automatically, but you can also use CSS for a mobile-friendly embed.
- Include Alt Tags for Images: If you add screenshots or thumbnails, make sure to include relevant alt text for those images.
- Encourage Engagement: Higher engagement (e.g., comments, shares, likes) signals Google that your content is valuable. Include a call to action asking readers to share or comment on the video.
Wrapping Up
Manually embedding your YouTube videos using the “Share → Embed” code and a Custom HTML block in WordPress is an excellent way to gain more control over your site’s multimedia experience. Whether you want to customize the dimensions, remove related videos, or tweak autoplay settings, having direct access to the <iframe>
code opens up a world of possibilities.
By following the steps above—and incorporating strong SEO practices—you’ll create a better user experience for your audience, keep them engaged longer, and potentially improve your site’s rankings in search engine results. Give it a try, and you’ll see just how easy it is to level up your WordPress blog with richly embedded YouTube content!