FeaturesHow it worksPricingBlog
All articles
Guide2025-05-15 · 9 min read

How to Embed YouTube Videos with Plain HTML & JavaScript

If you're building a custom website, static HTML site, or just want the simplest possible setup, EmbedShorts works with plain HTML and JavaScript. No frameworks. No build tools. Just copy, paste, and your videos are live.

This is the most straightforward way to add video feeds to any website, anywhere.

Why Use EmbedShorts for Plain HTML?

  • Dead simple: Just copy/paste two lines
  • No dependencies: Zero external requirements
  • Works everywhere: Static hosting, shared hosts, anywhere HTML works
  • No build step: Deploy immediately
  • Ultra-portable: Move code around freely
  • Future-proof: Never break due to framework updates

What You'll Need

  1. A place to host HTML (GitHub Pages, Netlify, your server, etc.)
  2. A text editor (VS Code, Notepad++, even basic Notepad works)
  3. An EmbedShorts account (free)
  4. A YouTube channel or playlist

Step 1: Create Your EmbedShorts Widget

  1. Go to embedshorts.com
  2. Sign up (takes 2 minutes)
  3. Click "Create New Widget"
  4. Select content type:
    • Shorts: TikTok/Reels-style vertical videos
    • Videos: Longer-form YouTube content
  5. Pick a template:
    • Minimal: Clean, simple
    • Dark: Bold, modern
    • Reels: Creator-focused
    • Featured: Main video + sidebar
    • Grid: Modern gallery
  6. Configure:
    • Source: YouTube Channel or Playlist
    • Paste your YouTube URL or playlist ID
    • Set max videos
    • Choose orientation
  7. Customize colors to match your site
  8. Publish

Step 2: Get Your Embed Code

  1. Click "Share" in EmbedShorts dashboard
  2. Click "Embed Code"
  3. Copy the code (it looks like this):
<script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
<div id="embedshorts-YOUR_WIDGET_ID"></div>

Step 3: Add to Your HTML

The Simplest Approach

Add the embed code anywhere in your HTML where you want videos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Site</h1>
  <p>Here are our latest videos:</p>
  
  <!-- EmbedShorts Video Feed -->
  <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
  <div id="embedshorts-YOUR_WIDGET_ID"></div>
  
  <p>© 2024 My Site. All rights reserved.</p>
</body>
</html>

That's literally all you need. Save this file as index.html and open it in your browser.

Common HTML Layouts

Full-Width Video on Homepage

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background: #f5f5f5;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }
    
    .header {
      text-align: center;
      margin-bottom: 40px;
    }
    
    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      color: #333;
    }
    
    .header p {
      font-size: 1.1rem;
      color: #666;
    }
    
    .video-section {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Our Latest Videos</h1>
      <p>Check out what we've been working on</p>
    </div>
    
    <div class="video-section">
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
      <div id="embedshorts-YOUR_WIDGET_ID"></div>
    </div>
  </div>
</body>
</html>

Sidebar Layout (Desktop)

<!DOCTYPE html>
<html>
<head>
  <title>Blog Post</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Georgia, serif;
      line-height: 1.6;
      color: #333;
    }
    
    .container {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 30px;
      max-width: 1000px;
      margin: 0 auto;
      padding: 30px 20px;
    }
    
    .main {
      grid-column: 1;
    }
    
    .sidebar {
      grid-column: 2;
      background: #f9f9f9;
      padding: 20px;
      border-radius: 4px;
    }
    
    .sidebar h3 {
      margin-bottom: 15px;
    }
    
    /* Mobile: stack vertically */
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
      
      .sidebar {
        grid-column: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <main class="main">
      <h1>How to Get Started with Our Service</h1>
      <p>Here's a comprehensive guide...</p>
      <!-- Blog content here -->
    </main>
    
    <aside class="sidebar">
      <h3>Related Videos</h3>
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
      <div id="embedshorts-YOUR_WIDGET_ID"></div>
    </aside>
  </div>
</body>
</html>

Multiple Sections

<!DOCTYPE html>
<html>
<head>
  <title>Gallery</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      background: #f0f0f0;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    section {
      background: white;
      padding: 40px;
      margin-bottom: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    section h2 {
      margin-bottom: 20px;
      font-size: 1.8rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 style="text-align: center; margin: 40px 0;">Our Content Library</h1>
    
    <section>
      <h2>Featured Videos</h2>
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="WIDGET_ID_1"></script>
      <div id="embedshorts-WIDGET_ID_1"></div>
    </section>
    
    <section>
      <h2>Tutorials</h2>
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="WIDGET_ID_2"></script>
      <div id="embedshorts-WIDGET_ID_2"></div>
    </section>
    
    <section>
      <h2>Customer Stories</h2>
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="WIDGET_ID_3"></script>
      <div id="embedshorts-WIDGET_ID_3"></div>
    </section>
  </div>
</body>
</html>

Adding Basic Styling

Using Inline CSS

<style>
  .video-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .video-container h2 {
    margin-bottom: 20px;
    color: #333;
  }
</style>

<div class="video-container">
  <h2>Our Videos</h2>
  <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
  <div id="embedshorts-YOUR_WIDGET_ID"></div>
</div>

External CSS File

Create styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.video-section {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.video-section h2 {
  margin-top: 0;
  color: #333;
}

In your HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="video-section">
      <h2>Latest Videos</h2>
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
      <div id="embedshorts-YOUR_WIDGET_ID"></div>
    </div>
  </div>
</body>
</html>

Responsive Design

Make your HTML responsive to all devices:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial, sans-serif;
      background: #f5f5f5;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .video-section {
      background: white;
      padding: 30px;
      border-radius: 8px;
      margin-bottom: 30px;
    }
    
    /* Tablet: smaller padding */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
      
      .video-section {
        padding: 20px;
      }
    }
    
    /* Mobile: minimal padding */
    @media (max-width: 480px) {
      .container {
        padding: 10px;
      }
      
      .video-section {
        padding: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Videos</h1>
    <div class="video-section">
      <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
      <div id="embedshorts-YOUR_WIDGET_ID"></div>
    </div>
  </div>
</body>
</html>

Using JavaScript to Dynamically Add Widgets

If you want to add widgets dynamically:

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Videos</title>
</head>
<body>
  <h1>Our Videos</h1>
  <div id="video-container"></div>
  
  <script>
    // Array of widget IDs
    const widgets = [
      'WIDGET_ID_1',
      'WIDGET_ID_2',
      'WIDGET_ID_3'
    ];
    
    // Add EmbedShorts script once
    const script = document.createElement('script');
    script.src = 'https://embed.embedshorts.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
    
    // Create a container for each widget
    widgets.forEach(widgetId => {
      const container = document.createElement('div');
      container.id = `embedshorts-${widgetId}`;
      container.style.marginBottom = '30px';
      document.getElementById('video-container').appendChild(container);
    });
  </script>
</body>
</html>

Using on Static Site Hosts

GitHub Pages

  1. Create a GitHub repository
  2. Add your HTML file (index.html)
  3. Go to Settings → Pages
  4. Select "Deploy from a branch"
  5. Choose main branch
  6. Your site is live at username.github.io/repository

Netlify (Free)

  1. Drag and drop your HTML folder on Netlify
  2. Get a live URL instantly
  3. Connect to GitHub for auto-deploy

Vercel

  1. Import your repository
  2. Deploy automatically
  3. Get a live URL

Your Own Server

If you have a web server:

# Upload your HTML file via FTP or SSH
scp index.html user@yourserver.com:/var/www/html/

Embedding in iframes

If you want to isolate your video page:

<iframe 
  src="https://yourdomain.com/videos.html" 
  width="100%" 
  height="800"
  border="0"
></iframe>

SEO Optimization

Add basic SEO to your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Watch our latest videos and tutorials">
  <meta name="keywords" content="videos, tutorials, how-to">
  <title>Our Videos - My Site</title>
  
  <!-- Open Graph for social sharing -->
  <meta property="og:title" content="Our Videos">
  <meta property="og:description" content="Check out our latest content">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://yourdomain.com/videos">
</head>
<body>
  <h1>Our Latest Videos</h1>
  <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
  <div id="embedshorts-YOUR_WIDGET_ID"></div>
</body>
</html>

Performance Tips

Lazy Loading

Load the widget script only when needed:

<script>
  // Load widget script when user scrolls to it
  window.addEventListener('scroll', () => {
    const element = document.getElementById('embedshorts-YOUR_WIDGET_ID');
    if (!element) return;
    
    const rect = element.getBoundingClientRect();
    if (rect.top < window.innerHeight) {
      if (!window.widgetScriptLoaded) {
        const script = document.createElement('script');
        script.src = 'https://embed.embedshorts.com/widget.js';
        document.body.appendChild(script);
        window.widgetScriptLoaded = true;
      }
    }
  });
</script>

Troubleshooting

Widget not showing?

  • Check widget ID is correct
  • Make sure your YouTube channel is public
  • Verify the script tag loaded (check browser console)
  • Clear cache and reload

Not responsive on mobile?

  • Add <meta name="viewport"> tag
  • Use CSS media queries for responsive design
  • Test on actual mobile device

Widget breaks my styling?

  • EmbedShorts uses Shadow DOM (isolated)
  • Shouldn't conflict with your CSS
  • Check z-index if overlapping

Page too slow?

  • Widget is only <15 KB
  • Use lazy loading script approach above
  • Check if you have other slow resources

Browser Compatibility

EmbedShorts works in:

  • ✓ Chrome/Edge (all versions)
  • ✓ Firefox (all versions)
  • ✓ Safari (all versions)
  • ✓ Mobile browsers
  • ✓ IE 11 and newer

Pricing & Next Steps

EmbedShorts is free to start:

  • 1 widget
  • 1,000 monthly views
  • Full customization

Upgrade as you grow:

  • Starter: $19/mo (3 widgets, 10K views)
  • Pro: $99/mo (10 widgets, 100K views)
  • Agency: $499/mo (unlimited, white-label)

Ready to add video to your HTML site?

  1. Sign up for free
  2. Create your widget
  3. Copy the embed code
  4. Paste into your HTML file
  5. Deploy

FAQs

Do I need any build tools? No, pure HTML and JavaScript. Works everywhere.

Is there a tutorial or template? Yes, we provide HTML templates on request. Contact support.

Can I use multiple widgets? Yes, create separate widgets and embed each one.

Will it work on my shared hosting? Yes, if you can upload HTML files, it works.

Is the widget responsive? Completely. Adapts to all screen sizes automatically.

Can I customize the colors? Yes, fully customizable in the EmbedShorts dashboard.

Start embedding YouTube videos in plain HTML today. Create your free EmbedShorts account and add dynamic video in minutes.

Ready to embed YouTube videos?

Free plan available. No credit card. 5-minute setup.

Start for free →