In the realm of blogging, visual content reigns supreme. As a blogger, incorporating engaging multimedia elements like videos into your posts can significantly enhance reader engagement and retention. YouTube, being one of the largest video-sharing platforms, offers a plethora of content that can complement your written material.
However, simply embedding a YouTube video onto your Blogger site may not always align with your aesthetic preferences or branding. Fear not! In this guide, we'll walk you through how to embed YouTube videos on your Blogger site with custom modifications and styles to seamlessly integrate them into your content.
Why Customize YouTube Video Embeds?
Customizing YouTube video embeds serves several purposes:
- Brand Consistency: Tailoring the appearance of embedded videos ensures they align with your blog's overall design and branding.
- Enhanced User Experience: Customization allows you to optimize the viewing experience for your audience, making it more visually appealing and engaging.
- Increased Engagement: By adding personalized touches, you can capture and retain the attention of your readers, encouraging them to interact with your content.
Benefits of Embedding videos
- Enhanced Content: Embedding YouTube videos can enhance the content of your blog posts by providing visual aids, demonstrations, or explanations, making them more engaging and informative.
- Increased Engagement: Videos can help increase user engagement with your blog posts. Visitors may spend more time on your site watching videos, which can lower bounce rates and improve overall user experience.
- SEO Benefits: Including multimedia content like YouTube videos can positively impact your blog's search engine optimization (SEO). Search engines often prioritize pages with multimedia content, leading to potentially higher rankings in search results.
- Access to Diverse Content: YouTube offers a vast library of content across various genres and topics. By embedding YouTube videos, you can easily leverage this content to complement your blog posts without creating your own videos.
- Easy Implementation: Embedding YouTube videos into Blogger posts is usually straightforward and doesn't require technical expertise. Most blogging platforms, including Blogger, provide simple tools to embed videos with just a few clicks.
Step-by-Step Guide:
Step-by-Step Guide to Customizing YouTube Video Embeds on Blogger:
Follow these steps to embed YouTube videos with custom modifications and styles on your Blogger site:
Step 1: Obtain the YouTube Video URL
Begin by selecting the YouTube video you wish to embed. Copy the video's URL from the address bar.
Step 2: Access the HTML Editor in Blogger
Navigate to the Blogger dashboard and select the blog post where you want to embed the video. Enter the post editor and switch to the HTML editing mode.
Step 3: Embed the YouTube Video with Custom Modifications
Paste the following code snippet into the HTML editor:
<!-- custom feature: YouTube video on blog -->
<div class="ytiframe">
<!-- custom feature: YouTube video on blog iframe video embed -->
<iframe id="youtube-video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen frameborder="0" height="auto" width="100%" title="YouTube video player"
src="PASTE_YOUTUBE_VIDEO_URL_HERE" youtube-src-id="PASTE_YOUTUBE_VIDEO_ID_HERE"></iframe>
</div>
Replace "PASTE_YOUTUBE_VIDEO_URL_HERE" with the URL of your chosen YouTube video and "PASTE_YOUTUBE_VIDEO_ID_HERE" with the video's ID.
Video URL and ID will be as follows format-
- URL : https://www.youtube.com/embed/hnry9X8qhgI
- ID : hnry9X8qhgI
Step 4: Apply Custom CSS Styles
Add the following CSS styles to your Blogger theme's CSS editor or within the <style> tags in the HTML editor:
.ytiframe {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Aspect ratio (16:9) */
height: 0;
}
.ytiframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px; /* Optional: Add border radius for rounded corners */
box-shadow: 0 0 30px white; /* Optional: Add box shadow for depth effect */
}
These styles ensure the embedded video maintains responsiveness and adopts a visually pleasing appearance.
Step 5: JavaScript Functionality (Optional)
To dynamically set the title attribute of the embedded video to match the page title, include the provided JavaScript code snippet in your HTML editor.
<script>
// custom feature codesam youtube video on blog
// Get the title of the current page
var pageTitle = document.title;
// Function to set the title attribute of the iframe
function setTitleToIframe() {
var iframe = document.getElementById('youtube-video');
if (iframe) {
iframe.title = pageTitle;
}
}
// Call the function when the document is loaded
window.onload = function () {
setTitleToIframe();
};
</script>
Step 6: Preview and Publish
After embedding the YouTube video and applying customizations, preview your blog post to ensure everything looks as desired. Once satisfied, publish your post to make it live on your Blogger site.
Embed YouTube Video
Use the following iFrame to embed the Youtube video.
<div class="ytiframe">
<iframe id="youtube-video"
allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen
frameborder="0"
height="auto"
width="100%"
title="YouTube video player"
src="https://www.youtube.com/embed/hnry9X8qhgI" youtube-src-id="hnry9X8qhgI"></iframe>
</div>
Embed YouTube Playlist
Use the following iFrame to embed the YouTube playlist.
<div class="ytiframe">
<iframe
allow="accelerometer;
autoplay="0";
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen=""
frameborder="0"
height="auto"
src="https://www.youtube-nocookie.com/embed/videoseries?list=PLAYLIST_VIDEO_ID&autoplay=1&rel=0"
title="YouTube video player"
width="100%"
></iframe>
</div>
Embed YouTube Using APIs
There is another option to embed the YouTube in Blogger or on other platforms is to using the Google YouTube APIs.
For this, we need to generate our APIs from the google cloud platform.