How to Launch a Free Video Course on Blogger
Creating a free video course website does not always require WordPress, expensive LMS plugins, or paid platforms. You can build a simple and fast video course system using Blogger and YouTube for free.
If you already use Blogger, this method is perfect because:
- No hosting cost
- No LMS plugin required
- Fast loading website
- Easy to manage lessons
- Works on mobile devices
- Uses free YouTube hosting
- Beginner friendly
In this guide, you will learn how to create a complete free video course website on Blogger with chapters, lesson progress, & More.
First, Upload all videos to YouTube and you can make it either Public or unlisted. Next Note down the video title, duration and Video Id in a notepad file (Chapter Wise).
Next Create a New page and Use the Below code.
<style>
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
color: white;
margin-bottom: 40px;
}
.header h2 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
color: black;
}
.main-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: 30px;
margin-bottom: 40px;
}
.video-player-section {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.video-container iframe {
width: 100%;
height: 100%;
border: none;
}
.video-progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255,255,255,0.2);
z-index: 10;
}
.video-progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.1s linear;
}
.video-time-display {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
z-index: 11;
}
.video-info {
padding: 30px;
}
.video-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 10px;
color: #222;
}
.video-meta {
display: flex;
gap: 20px;
color: #666;
font-size: 0.95rem;
margin-bottom: 20px;
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.progress-section {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
height: fit-content;
position: sticky;
top: 20px;
}
.progress-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 20px;
color: #222;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
transition: width 0.3s ease;
}
.progress-text {
font-size: 0.9rem;
color: #666;
text-align: center;
margin-bottom: 25px;
}
.chapters-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
}
.chapters-list::-webkit-scrollbar {
width: 6px;
}
.chapters-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.chapters-list::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 10px;
}
.chapters-list::-webkit-scrollbar-thumb:hover {
background: #999;
}
.chapter {
background: #f5f5f5;
border-left: 4px solid transparent;
padding: 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid #e0e0e0;
}
.chapter:hover {
background: #eee;
border-color: #667eea;
}
.chapter.active {
background: #e8eaf6;
border-left-color: #667eea;
border-color: #667eea;
}
.chapter.completed {
opacity: 0.7;
}
.chapter-number {
font-size: 0.8rem;
color: #999;
font-weight: 500;
margin-bottom: 4px;
}
.chapter-title {
font-size: 0.95rem;
font-weight: 500;
color: #222;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.chapter-duration {
font-size: 0.8rem;
color: #999;
}
.chapter-status {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
margin-right: 6px;
vertical-align: middle;
}
.chapter.completed .chapter-status {
background: #4caf50;
}
.chapter.active .chapter-status {
background: #667eea;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background-color: white;
margin: 5% auto;
border-radius: 12px;
width: 90%;
max-width: 900px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: slideIn 0.3s ease;
position: relative;
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-video-container {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.modal-video-container iframe {
width: 100%;
height: 100%;
border: none;
}
.modal-close {
position: absolute;
right: 20px;
top: 20px;
font-size: 28px;
font-weight: bold;
color: white;
cursor: pointer;
background: rgba(0,0,0,0.5);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: all 0.3s ease;
z-index: 1001;
}
.modal-close:hover {
background: rgba(0,0,0,0.8);
transform: scale(1.1);
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.progress-section {
position: static;
sticky: none;
}
.header h1 {
font-size: 1.8rem;
}
.video-title {
font-size: 1.4rem;
}
.modal-content {
width: 95%;
margin: 20% auto;
}
}
.completion-badge {
display: inline-block;
background: #4caf50;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-left: 10px;
}
.mark-complete-btn {
background: #667eea;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
margin-top: 20px;
width: 100%;
}
.mark-complete-btn:hover {
background: #764ba2;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.mark-complete-btn.completed {
background: #4caf50;
}
.completion-percentage {
font-size: 1.4rem;
font-weight: 700;
text-align: center;
margin-bottom: 20px;
color: #667eea;
}
.empty-state {
text-align: center;
padding: 60px 30px;
color: #999;
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.empty-state h2 {
color: #666;
margin-bottom: 10px;
}
@keyframes slideInRight {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
z-index: 10000;
font-weight: 600;
animation: slideInRight 0.3s ease;
}
</style>
<div class="container">
<div class="header">
<h2>📚 Complete Course Name</h2>
<p>Master the skills you need to succeed</p>
</div>
<div class="main-content">
<div class="video-player-section">
<div class="video-container" id="videoContainer">
<div class="empty-state">
<div class="empty-state-icon">🎬</div>
<h2>Select a video to start</h2>
<p>Choose from the list on the right to begin learning</p>
</div>
</div>
<div class="video-progress-bar" id="videoProgressBarContainer" style="display: none;">
<div class="video-progress-fill" id="videoProgressFill"></div>
<div class="video-time-display" id="videoTimeDisplay">0:00 / 0:00</div>
</div>
<div class="video-info">
<h2 class="video-title" id="videoTitle">Welcome to the Course</h2>
<div class="video-meta">
<div class="meta-item">
<span>📺 Chapter:</span>
<span id="currentChapter">Select a video</span>
</div>
<div class="meta-item">
<span>⏱️ Duration:</span>
<span id="videoDuration">--:--</span>
</div>
</div>
<button class="mark-complete-btn" onclick="toggleCompletion()" id="completeBtn">Mark as Completed</button>
</div>
</div>
<div class="progress-section">
<h3 class="progress-title">Your Progress</h3>
<div class="completion-percentage" id="completionPercentage">0%</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill" style="width: 0%;"></div>
</div>
<div class="progress-text">
<span id="completedCount">0</span> / <span id="totalCount">0</span> videos completed
</div>
<div class="chapters-list" id="chaptersList"></div>
</div>
</div>
</div>
<div id="videoModal" class="modal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal()">×</button>
<div class="modal-video-container" id="modalVideoContainer"></div>
</div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player;
let progressUpdateInterval;
function onYouTubeIframeAPIReady() {
console.log('YouTube API Ready');
}
function createYouTubePlayer(videoId, containerId) {
if (player) {
try {
player.destroy();
} catch(e) {
console.log('Player destroy error:', e);
}
}
setTimeout(() => {
player = new YT.Player(containerId, {
videoId: videoId,
playerVars: {
'controls': 1,
'modestbranding': 1,
'rel': 0,
'fs': 1,
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}, 100);
}
function onPlayerReady(event) {
console.log('Player Ready');
updateVideoProgress();
document.getElementById('videoProgressBarContainer').style.display = 'block';
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING) {
startProgressTracking();
} else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
stopProgressTracking();
}
}
function onPlayerError(event) {
console.error('YouTube Player Error:', event.data);
}
function startProgressTracking() {
stopProgressTracking();
progressUpdateInterval = setInterval(updateVideoProgress, 500);
}
function stopProgressTracking() {
if (progressUpdateInterval) {
clearInterval(progressUpdateInterval);
}
}
function updateVideoProgress() {
if (!player || !player.getDuration) return;
try {
const currentTime = player.getCurrentTime();
const duration = player.getDuration();
if (duration > 0) {
const percentage = (currentTime / duration) * 100;
document.getElementById('videoProgressFill').style.width = percentage + '%';
const currentDisplay = formatTime(currentTime);
const durationDisplay = formatTime(duration);
document.getElementById('videoTimeDisplay').textContent = `${currentDisplay} / ${durationDisplay}`;
if (percentage >= 90 && currentVideo && !completedVideos.has(currentVideo.id)) {
completedVideos.add(currentVideo.id);
saveProgress();
renderChapters();
updateProgress();
showNotification('🎉 Great job! Video marked as complete.');
}
}
} catch (e) {
console.log('Progress update error:', e);
}
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
function showNotification(message) {
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOutRight 0.3s ease';
setTimeout(() => notification.remove(), 300);
}, 3000);
}
</script>
<script>
// ==================== COURSE DATA ====================
// 🔴 EDIT THIS SECTION ONLY - Add your chapters and videos here
const courseData = {
courseName: "Key2Blogging Web Development Course",
courseDescription: "Master HTML, CSS, JavaScript and build real-world projects",
chapters: [
{
id: 1,
title: "Create a STACKING Card Effect in Kadence (Scroll Animation)",
duration: "10:39",
videoId: "ls-cpj8lbZo" // Replace with your YouTube video ID
},
{
id: 2,
title: "Stop Losing Rankings! Remove Spam Backlinks From Google 🤯",
duration: "04:33",
videoId: "FSxhYtez2Rk" // Replace with your YouTube video ID
},
{
id: 3,
title: "How To Inspect Element On Android Mobile Phone (2026 Updated)",
duration: "03:35",
videoId: "O7BV9TN08ic" // Replace with your YouTube video ID
},
{
id: 4,
title: "How to Create a WebP Converter Tool Website (Step by Step) 🔥",
duration: "05:36",
videoId: "WUYO3TxIUzA" // Replace with your YouTube video ID
},
{
id: 5,
title: "How to Monitor Uptime and Downtime of any website (FREE)",
duration: "03:36",
videoId: "U7KMbCaBgfk" // Replace with your YouTube video ID
}
]
};
// 🔴 END OF EDIT SECTION
// ==================== STATE MANAGEMENT ====================
let currentVideo = null;
let completedVideos = new Set();
function initializeStorage() {
const storageKey = 'courseProgress_' + btoa(courseData.courseName);
const stored = localStorage.getItem(storageKey);
if (stored) {
try {
completedVideos = new Set(JSON.parse(atob(stored)));
} catch (e) {
completedVideos = new Set();
}
}
}
function saveProgress() {
const storageKey = 'courseProgress_' + btoa(courseData.courseName);
const encoded = btoa(JSON.stringify(Array.from(completedVideos)));
localStorage.setItem(storageKey, encoded);
}
function isValidYouTubeId(videoId) {
return /^[a-zA-Z0-9_-]{11}$/.test(videoId);
}
document.addEventListener('DOMContentLoaded', function() {
initializeStorage();
updateHeader();
renderChapters();
updateProgress();
});
function updateHeader() {
document.querySelector('.header h1').textContent = '📚 ' + courseData.courseName;
document.querySelector('.header p').textContent = courseData.courseDescription;
}
function renderChapters() {
const chaptersList = document.getElementById('chaptersList');
chaptersList.innerHTML = '';
courseData.chapters.forEach((chapter) => {
const chapterEl = document.createElement('div');
chapterEl.className = 'chapter';
if (currentVideo && currentVideo.id === chapter.id) {
chapterEl.classList.add('active');
}
if (completedVideos.has(chapter.id)) {
chapterEl.classList.add('completed');
}
chapterEl.innerHTML = `
<div class="chapter-number">Chapter ${chapter.id}</div>
<div class="chapter-title">
<span class="chapter-status"></span>${chapter.title}
</div>
<div class="chapter-duration">⏱️ ${chapter.duration}</div>
`;
chapterEl.addEventListener('click', () => playVideo(chapter));
chaptersList.appendChild(chapterEl);
});
document.getElementById('totalCount').textContent = courseData.chapters.length;
}
function playVideo(chapter) {
if (!isValidYouTubeId(chapter.videoId)) {
alert('Invalid video ID. Please check your configuration.');
return;
}
currentVideo = chapter;
const videoContainer = document.getElementById('videoContainer');
videoContainer.innerHTML = `<div id="youtubePlayer-${chapter.id}"></div>`;
document.getElementById('videoTitle').textContent = chapter.title;
document.getElementById('currentChapter').textContent = 'Chapter ' + chapter.id;
document.getElementById('videoDuration').textContent = chapter.duration;
createYouTubePlayer(chapter.videoId, `youtubePlayer-${chapter.id}`);
renderChapters();
updateProgress();
}
function openModal(chapter) {
if (!isValidYouTubeId(chapter.videoId)) {
alert('Invalid video ID.');
return;
}
const modal = document.getElementById('videoModal');
const modalVideoContainer = document.getElementById('modalVideoContainer');
const iframeHTML = `<iframe
src="https://www.youtube.com/embed/${encodeURIComponent(chapter.videoId)}?rel=0&modestbranding=1"
title="${escapeHtml(chapter.title)}"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>`;
modalVideoContainer.innerHTML = iframeHTML;
modal.style.display = 'block';
document.body.style.overflow = 'hidden';
}
function closeModal() {
const modal = document.getElementById('videoModal');
modal.style.display = 'none';
document.body.style.overflow = 'auto';
}
window.addEventListener('click', function(event) {
const modal = document.getElementById('videoModal');
if (event.target === modal) {
closeModal();
}
});
function toggleCompletion() {
if (!currentVideo) {
alert('Please select a video first.');
return;
}
if (completedVideos.has(currentVideo.id)) {
completedVideos.delete(currentVideo.id);
} else {
completedVideos.add(currentVideo.id);
}
saveProgress();
renderChapters();
updateProgress();
}
function updateProgress() {
const completed = completedVideos.size;
const total = courseData.chapters.length;
const percentage = total === 0 ? 0 : Math.round((completed / total) * 100);
document.getElementById('completedCount').textContent = completed;
document.getElementById('completionPercentage').textContent = percentage + '%';
document.getElementById('progressFill').style.width = percentage + '%';
const btn = document.getElementById('completeBtn');
if (btn) {
if (currentVideo && completedVideos.has(currentVideo.id)) {
btn.textContent = 'Completed';
btn.classList.add('completed');
} else {
btn.textContent = 'Mark as Completed';
btn.classList.remove('completed');
}
}
}
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
}
if (event.key === 'c' && document.getElementById('videoModal').style.display === 'none') {
if (currentVideo) {
toggleCompletion();
}
}
});
</script>Now, You need to hide unused section on your website like sidebar, header, footer to make the layout clean.
Here, You can use the format like this below. Note class is different for all themes.
<style>
/* Hide Header, Footer, and Sidebars */
.sidebar, #sidebar-wrapper {
display: none !important;
}
footer {
display: none;}
.header{
margin: 0!important;
}
/* Reset Main Container Margins/Padding */
.content-wrapper, .main-inner, .column-center-inner, .main {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
body { background: #ffffff !important; /* Changes background to white */ }
.onPg .mainbar, .onMl .mainbar {max-width: 100%;}
.ticker{display:none;}
</style>Follow the video tutorial for the the step by step instruction.
Launching a free video course on Blogger is one of the easiest ways to start teaching online without investing money in expensive platforms.
There are some limitations with this method. You can’t launch paid course or provide resticted acess to few users. This is for Free video course that is hosted on YouTube platform.
If you still have doubts, feel free to ask in the comment section.
