Embed MP4 Video in HTML using Google Drive

Step-by-step guide with comparisons and best practices for embedding videos on your website.

Step-by-Step Instructions (Google Drive)

  1. Upload your .mp4 file to Google Drive.
  2. Get a shareable link: Right-click the file → Get link → Change access to "Anyone with the link".
  3. Copy the link, which looks like:
    https://drive.google.com/file/d/1abcDEF1234567890/view?usp=sharing
  4. Extract the file ID: 1abcDEF1234567890
  5. Use this embed code:
<iframe src="https://drive.google.com/file/d/1abcDEF1234567890/preview" width="640" height="360" allow="autoplay"></iframe>

Why <video> Tag Doesn't Work with Google Drive

Google Drive does not provide a direct link to the MP4 file that is usable in the <video> tag. The shared links are web-view pages and not raw file URLs.

For example, this won’t work:

<video controls>
  <source src="https://drive.google.com/file/d/1abcDEF1234567890/view?usp=sharing" type="video/mp4">
</video>

You will get a playback error or the browser won't recognize the file format correctly.

Comparison: Google Drive vs Other Video Hosting Options

Platform Direct MP4 Link Supports <video> Tag Pros Cons
Google Drive ❌ ❌ Free, easy to share, embeds via iframe No direct streaming link, no custom player
Firebase Storage ✅ ✅ Fast CDN, direct access, great for developers Requires setup and Google Cloud knowledge
Cloudinary ✅ ✅ Image + video optimization, streaming-ready Free tier has limits, requires registration
YouTube N/A ❌ (iframe only) High performance, analytics, built-in player Ads, not private, branding can't be removed
Self-Hosting (Shared/VPS) ✅ ✅ Full control, branding-free Bandwidth cost, security, slower load times

Final Tips

  • Use Google Drive only for basic embedding or non-critical video use.
  • If you need full control (custom players, speed, format), go with Firebase or Cloudinary.
  • For public content and audience reach, YouTube is best.
  • Use the <video> tag only when you have a direct link to an MP4 file.