Have you ever imagined an AI that could watch a YouTube video and magically build a functional website from it? It sounds like something straight out of science fiction, right? Well, today at OpODab, we're putting that incredible claim to the test. We're running a real-world project to see if Google's latest AI model, Gemini 2.5 Pro, can truly handle such a complex task. Our mission: to turn a simple pancake recipe video into an interactive recipe guide website.
The Challenge: From Video to Code in Minutes
The goal was simple, yet ambitious. We would take a recipe video from YouTube and give a series of prompts to Gemini 2.5 Pro. The AI needed to be able to:
This project is the perfect test for Gemini's multimodal capabilities—its ability to understand information from different formats (in this case, video, audio, and text) and transform it into a structured output like code.
Step 1: Choosing the Right Source Video
The quality of an AI's output is heavily dependent on the quality of its input. For this project, we chose the "How to Make The Best Pancakes" video from the YouTube channel Nefis TV. This video was ideal because it had clear visuals, an easy-to-understand narration, and explicitly displayed the ingredients and steps on-screen. This gave the AI rich, structured data to analyze.
Step 2: The Initial Prompt to Gemini
Once we had the video link, we went to the Google AI Studio and gave it our first command. We intentionally kept this prompt fairly broad to see the AI's baseline capabilities without too much hand-holding.
Analyze the content of the youtube video, and generate a complete single page website using HTML, CSS, and javascript. It should be a recipe guide that includes a list of ingredients, and the step by step instructions. Make the design clean and modern, also responsive.
Step 3: The First Result - Functional, but... Plain
In less than a minute, Gemini produced the complete HTML and CSS code. The result was impressive from a functional standpoint. The AI successfully extracted all ingredients and steps correctly and organized them into a logical HTML structure. Visually, however, the result was very basic—almost completely unstyled. This proved the AI understood the core request, but its interpretation of "modern design" was minimal.
But this is where the real magic of modern AI comes in. It's not a one-shot tool; it's a conversation. We can give it feedback to refine the output.
Step 4: The Refinement Prompt - The Designer's Touch
We weren't satisfied with the first draft. So, we continued the "conversation" with Gemini, acting like a product manager giving directions to a developer.
it good, but can you add some icon, hover etc, so ui is beautifull and user friendly. and also i can play the video
In this second prompt, we asked for specific improvements:
- Icons: To provide visual cues (e.g., a shopping basket for ingredients).
- Hover Effects: To make the interface feel more interactive and alive.
- Playable Video: To ensure the embedded video was fully functional.
- The Goal: A UI that is "beautiful and user friendly."
Step 5: The Final Result - A Polished & Professional Website
In response to the second prompt, Gemini completely rewrote the CSS and slightly modified the HTML. The result was stunning. The plain-looking site was transformed into a professional, clean, and visually appealing recipe page.
The changes were dramatic:
The Full Code: Grab It and Try It Yourself!
To demonstrate transparency and help you learn (in line with EEAT principles), we're providing the full code generated by Gemini. We've separated it into two tabs using the Plus UI component so you can easily compare the initial code with the final, refined code.
This is the first batch of code Gemini produced from the initial prompt. It's functional, but very basic.
View Initial Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fluffy Pancakes Recipe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #ff6347;
--secondary-color: #fffaf0;
--text-color: #333;
--light-gray: #f0f0f0;
--border-radius: 12px;
--shadow: 0 4px 15px rgba(0,0,0,0.1);
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.8;
margin: 0;
padding: 0;
background-color: #f7f7f7;
color: var(--text-color);
}
.container {
max-width: 900px;
margin: 30px auto;
padding: 20px 40px;
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
h1 { text-align: center; color: var(--primary-color); font-weight: 700; font-size: 2.5em; margin-bottom: 20px; }
h2 { font-weight: 600; font-size: 1.8em; color: var(--text-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 20px; }
h2 i { margin-right: 15px; color: var(--primary-color); }
/* --- Video & Loader Styles --- */
.video-container {
position: relative;
width: 100%;
border-radius: var(--border-radius);
margin-bottom: 30px;
box-shadow: var(--shadow);
overflow: hidden;
cursor: pointer;
}
.video-container img {
width: 100%;
display: block;
transition: transform 0.3s ease;
}
.video-container:hover img { transform: scale(1.03); }
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.video-container:hover .play-button { transform: translate(-50%, -50%) scale(1.1); color: #fff; }
/* NEW: Styles for the loading state */
.video-container.loading .play-button {
opacity: 0; /* Hide play button when loading */
}
.loader {
display: none; /* Hidden by default */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 6px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.video-container.loading .loader {
display: block; /* Show loader when loading */
}
@keyframes spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.video-container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.recipe-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .recipe-grid { grid-template-columns: repeat(2, 1fr); } }
.ingredients, .instructions { background-color: var(--secondary-color); padding: 25px; border-radius: var(--border-radius); border: 1px solid var(--light-gray); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ingredients:hover, .instructions:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
ul, ol { padding-left: 25px; }
li { margin-bottom: 15px; padding: 5px; border-radius: 5px; transition: background-color 0.3s ease; }
li:hover { background-color: rgba(255, 99, 71, 0.1); }
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-pancakes"></i> Fluffy Pancakes</h1>
<div class="video-container" id="video-facade" data-youtube-id="Kx8p2sC5H_E">
<img src="https://img.youtube.com/vi/y2AYFpYn8ws/maxresdefault.jpg" alt="Fluffy pancakes recipe video thumbnail">
<div class="play-button"><i class="fab fa-youtube"></i></div>
<!-- NEW: Add the loader div -->
<div class="loader"></div>
</div>
<div class="recipe-grid">
<div class="ingredients">
<h2><i class="fas fa-shopping-basket"></i>Ingredients</h2>
<ul>
<li>2 Eggs</li>
<li>2 tbsp Granulated Sugar</li>
<li>200ml Milk</li>
<li>1 + ¼ cups All-Purpose Flour</li>
<li>2 tsp Baking Powder</li>
<li>2 tsp Vanilla Powder</li>
</ul>
</div>
<div class="instructions">
<h2><i class="fas fa-utensils"></i>Instructions</h2>
<ol>
<li>Whisk together eggs and sugar until well combined.</li>
<li>Add milk, flour, baking powder, and vanilla powder.</li>
<li>Whisk until the batter is smooth and slightly thick.</li>
<li>Lightly oil a non-stick pan over medium heat.</li>
<li>Pour about 1 tbsp of batter onto the pan for each pancake.</li>
<li>Cook until bubbles form on the surface, then flip.</li>
<li>Cook until both sides are golden brown.</li>
<li>Serve with your favorite toppings and enjoy!</li>
</ol>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const videoFacade = document.getElementById('video-facade');
videoFacade.addEventListener('click', function() {
// Prevent further clicks while loading
if (this.classList.contains('loading')) {
return;
}
// Add loading class to show spinner and hide play button
this.classList.add('loading');
const videoId = this.getAttribute('data-youtube-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
iframe.setAttribute('allowfullscreen', '');
// NEW: Wait for the iframe to fully load before swapping
iframe.onload = () => {
this.innerHTML = ''; // Clear the container (removes img, play button, loader)
this.appendChild(iframe); // Add the fully loaded video
};
}, { once: true }); // Use { once: true } so the event listener is removed after first click
});
</script>
</body>
</html>
This is the code after the second refinement prompt. Note the additions of Google Fonts, Font Awesome, and much more detailed CSS.
View Final Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fluffy Pancakes Recipe</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #ff6347; /* Tomato */
--secondary-color: #fffaf0; /* FloralWhite */
--text-color: #333;
--light-gray: #f0f0f0;
--border-radius: 12px;
--shadow: 0 4px 15px rgba(0,0,0,0.1);
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.8;
margin: 0;
padding: 0;
background-color: #f7f7f7;
color: var(--text-color);
}
.container {
max-width: 900px;
margin: 30px auto;
padding: 20px 40px;
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
h1 {
text-align: center;
color: var(--primary-color);
font-weight: 700;
font-size: 2.5em;
margin-bottom: 20px;
}
h2 {
font-weight: 600;
font-size: 1.8em;
color: var(--text-color);
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
margin-bottom: 20px;
}
h2 i {
margin-right: 15px;
color: var(--primary-color);
}
.video-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
border-radius: var(--border-radius);
margin-bottom: 30px;
box-shadow: var(--shadow);
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.recipe-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
@media (min-width: 768px) {
.recipe-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.ingredients, .instructions {
background-color: var(--secondary-color);
padding: 25px;
border-radius: var(--border-radius);
border: 1px solid var(--light-gray);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ingredients:hover, .instructions:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
ul, ol {
padding-left: 25px;
}
li {
margin-bottom: 15px;
padding: 5px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
li:hover {
background-color: rgba(255, 99, 71, 0.1); /* Lighter primary color */
}
</style>
</head>
<body>
<div class="container">
<h1><i class="fas fa-pancakes"></i> Fluffy Pancakes</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/Kx8p2sC5H_E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="recipe-grid">
<div class="ingredients">
<h2><i class="fas fa-shopping-basket"></i>Ingredients</h2>
<ul>
<li>2 Eggs</li>
<li>2 tbsp Granulated Sugar</li>
<li>200ml Milk</li>
<li>1 + ¼ cups All-Purpose Flour</li>
<li>2 tsp Baking Powder</li>
<li>2 tsp Vanilla Powder</li>
</ul>
</div>
<div class="instructions">
<h2><i class="fas fa-utensils"></i>Instructions</h2>
<ol>
<li>Whisk together eggs and sugar until well combined.</li>
<li>Add milk, flour, baking powder, and vanilla powder.</li>
<li>Whisk until the batter is smooth and slightly thick.</li>
<li>Lightly oil a non-stick pan over medium heat.</li>
<li>Pour about 1 tbsp of batter onto the pan for each pancake.</li>
<li>Cook until bubbles form on the surface, then flip.</li>
<li>Cook until both sides are golden brown.</li>
<li>Serve with your favorite toppings and enjoy!</li>
</ol>
</div>
</div>
</div>
</body>
</html>
The Implications: What Does This Mean for the Future?
This small project is more than just about making a recipe website. It's a window into the future of web development and content creation.
- For Developers: An AI like Gemini can be an incredibly powerful coding assistant. It drastically speeds up the prototyping process, allowing developers to focus on more complex logic rather than writing repetitive boilerplate code.
- For Content Creators: Imagine being able to automatically create blog posts, guides, or even simple digital products directly from your video content. This opens up new revenue streams and new ways to engage with your audience.
- For Learners: This is an amazing learning tool. You can ask the AI to generate code examples for almost anything, and then study the code line-by-line to understand how it works.
Want to see this entire process live? We've recorded every step in a video on our @OpODab YouTube channel. Go watch it to see the AI magic happen in real time!
Conclusion
So, can an AI turn a YouTube video into a website? The answer is a resounding yes, and the result is far better than we expected. This experiment shows that we are entering a new era where AI is no longer just a tool for answering questions, but a creative partner that can help us build real things. Its ability to understand, reason, and generate across different formats (multimodality) is a game-changer.
The key to success lies in the iterative process—giving a command, reviewing the output, and providing more specific feedback. With the right approach, you can turn a simple idea into a polished digital product in a remarkably short amount of time.
