How to Embed Google Drive Video on Website: 2 Ways

Video streaming interface playing on a MacBook laptop browser, illustrating how to embed video on a website

You uploaded a video to Google Drive and want it playing on your landing page, not stuck behind a share link. The good news: you can embed a Google Drive video on your website in about three minutes with a standard iframe. The catch: Google’s default player adds a branding bar and sometimes a “sign in to Google” prompt that looks unprofessional on a marketing page. This guide covers both the standard iframe method and our cleaner Google Drive Video Player tool, plus responsive CSS you can copy-paste and troubleshooting for the most common playback issues.

How to Embed Google Drive Video with the Standard iframe

Google Drive app on a smartphone showing Google Workspace interface for file sharing and embedding

The standard method uses Google Drive’s built-in embed code, which generates an iframe pointing to the file’s preview URL. It works, but it includes Google’s branding bar and may prompt viewers to sign in. Here is how to get it done step by step.

Step 1: Set the Right Sharing Permissions

Before generating embed code, make sure your video is viewable by anyone with the link. If you skip this step, visitors will see a “You need permission” screen instead of your video.

  • Open Google Drive and right-click your video file.
  • Select Share.
  • Under “General access,” change “Restricted” to “Anyone with the link.”
  • Leave the role as Viewer.
  • Click Done.

For a deeper walkthrough of sharing permissions, including the differences between Viewer, Commenter, and Editor roles, see our guide to Google Drive folder sharing and permissions.

Step 2: Get the Embed Code

  • Double-click the video to open it in the Google Drive preview window.
  • Click the three-dot menu in the top-right corner.
  • Select “Open in new window.”
  • In the new window, click the three-dot menu again.
  • Select “Embed item.”
  • A dialog appears with an iframe snippet. Copy it.

The embed code looks like this:

Your actual FILE_ID is the long string of characters between /d/ and /preview in the URL. This is the same file ID used when you generate a Google Drive direct download link, so if you already have that link handy, you can reuse the ID.

Step 3: Paste the iframe into Your HTML

Paste the iframe snippet into your webpage HTML where you want the video to appear. If you are using a CMS like WordPress, switch to the Code editor view and paste it there. Save or publish the page, and the video should load.

That gives you a working embedded video. But two problems usually follow: the video is not responsive on mobile, and the Google branding bar makes it look like you are hosting on a third-party platform rather than your own site.

Make the Embed Responsive (Copy-Paste CSS)

Responsive website displayed across laptop, desktop screen, and smartphone showing content adapting to different screen sizes

The iframe from Google comes with fixed width and height attributes (usually 640×480). On mobile devices, this creates a video that overflows the screen or sits awkwardly in a narrow column. The fix is a CSS container that scales the video proportionally. Here is the CSS. Add it to your stylesheet or inside a block in your page header:

.video-container {
 position: relative;
 width: 100%;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
}

.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

The padding-bottom: 56.25% value creates a 16:9 aspect ratio. If your video uses a different ratio, adjust this number: divide height by width and multiply by 100. For a 4:3 video, use padding-bottom: 75%.

Now wrap your iframe in a container div:

Note the two changes from Google’s default code: the iframe now has width="100%" and height="100%" instead of fixed pixel values, and the parent div with class video-container handles the actual sizing. The video will now scale smoothly from desktop to mobile.

Use Our Google Drive Video Player for a Clean Embed

The iframe method works, but it carries Google’s branding bar at the top of the player and sometimes triggers a “Sign in to Google” prompt, especially for viewers who are not logged into a Google account. For landing pages and marketing sites, that is a problem worth fixing.

Google Drive Downloader offers a Google Drive Video Player tool that strips the branding and generates a clean embed code from your share link. No Google branding bar, no sign-in prompt, just the video. Here is how to use it.

How to Generate a Clean Embed Code

  • Copy your Google Drive share link (the same one from the sharing step above).
  • Paste it into the Google Drive Video Player tool at the top of this page.
  • The tool extracts the file ID and generates clean embed code automatically.
  • Copy the generated embed snippet and paste it into your website HTML.

The process takes about 30 seconds and does not require navigating through Google’s preview window or the three-dot menu. You just need the share link you already copied when setting permissions.

What Makes the Clean Player Different

The standard iframe embeds Google’s full preview interface, including the toolbar with Google’s logo, the “Open in Google Drive” button, and other UI chrome that signals “this is a Google product” rather than “this is your content.” The Video Player tool strips that chrome so the embed looks like a native video player on your site.

The tool also handles the responsive wrapper automatically, so you do not need to add the CSS container code separately unless you want custom styling. The generated embed code includes a responsive container by default.

If you are also distributing downloadable versions of your video, the same share link works with our Google Drive direct download link generator, so you can offer both an embedded player and a download button from the same source file.

iframe vs. Google Drive Video Player: Which Should You Use?

Here is how the two methods compare side by side:

FeatureStandard iframeGoogle Drive Video Player
Google branding barVisible at top of playerRemoved
Sign-in promptMay appear for logged-out viewersNot shown
Responsive by defaultNo, requires CSS wrapperYes, included
Autoplay supportLimited (muted only on mobile)Supported with controls
Mobile playbackWorks, but branding takes screen spaceFull-screen, clean
Fullscreen buttonPresent but inside Google UIPresent, clean
Setup time~3 minutes~30 seconds
Requires navigating Google Drive UIYesNo, just paste share link

If you are building a quick internal page or a personal blog post, the standard iframe is fine. If you are building a landing page where professional presentation matters, the Video Player tool is the better choice.

Troubleshooting: Video Won’t Play

Person squinting at a smartphone, illustrating common video playback issues on mobile browsers

“You Need Permission” Error

This is a permissions block, not a quota block. It means the file is still set to “Restricted” sharing. Go back to Google Drive, right-click the file, select Share, and change general access to “Anyone with the link.” Then re-copy the share link and regenerate your embed code.

If you are using a Google Workspace (work or school) account, your organization’s admin may block external sharing. Check with your admin, or use a personal Google account to host the video.

Autoplay Not Working on Mobile Browsers

Most mobile browsers (Safari on iOS, Chrome on Android) block autoplay for videos with sound. This is a browser-level restriction, not a Google Drive limitation. To autoplay on mobile, the video must be muted. Add allow="autoplay" to your iframe and append autoplay and mute parameters to the preview URL:

Even with these parameters, some mobile browsers still require a user tap before playback starts. If autoplay is critical for your landing page, consider using the Google Drive Video Player tool, which handles autoplay parameters more reliably across devices.

Fullscreen Button Missing

If the fullscreen button does not appear, add the allowfullscreen attribute to your iframe element:

The allow="autoplay; fullscreen" attribute tells the browser the iframe is permitted to enter fullscreen mode. Without it, the fullscreen button either does not appear or is grayed out.

Video Loads but Shows a Black Screen

This usually means the file format is not supported for streaming in the browser. Google Drive’s player handles MP4 (H.264) and WebM reliably. If you uploaded a MOV, AVI, or MKV file, re-export it as MP4 with H.264 encoding before uploading. The file may play fine in Drive’s own preview but fail to stream correctly when embedded on an external page.

Frequently Asked Questions

Common questions about embedding Google Drive videos, answered briefly. For more on sharing and permissions, see our guide on Google Drive folder sharing and permissions.

Try the Video Player Free

Paste your Google Drive share link into the Google Drive Video Player tool at the top of this page and get a clean embed code in seconds. No Google branding, no sign-in prompt, no CSS wrangling. Just paste, copy, and your video is live on your site.

Frequently Asked Questions

Can I embed a Google Drive video without making it public?

No. Embedded videos require the file to be set to “Anyone with the link” in Google Drive sharing settings. If the file is restricted, visitors see a permission error instead of the video. You do not need to publish it publicly on the web, but link sharing must be enabled.

Why does my embedded video show a “Sign in to Google” prompt?

The standard iframe embed sometimes prompts logged-out viewers to sign in, especially on certain mobile browsers. Using the Google Drive Video Player tool removes this prompt entirely. If you stick with the standard iframe, ensure the file is set to “Anyone with the link” and not restricted to specific email addresses.

How do I make my embedded Google Drive video responsive on mobile?

Wrap the iframe in a container div with CSS that uses padding-bottom for the aspect ratio (56.25% for 16:9 video). The Google Drive Video Player tool includes a responsive container by default, so no extra CSS is needed.

Will the embedded video stop working if I move or rename the file in Drive?

Renaming the file does not break the embed. Moving the file to a different folder also does not break it as long as sharing permissions remain set to “Anyone with the link.” However, deleting the file or changing permissions back to “Restricted” will cause the embed to stop working.

Can I autoplay an embedded Google Drive video?

Autoplay works on desktop browsers when you add the autoplay parameter to the iframe URL. On mobile, browsers block autoplay with sound. Use muted autoplay by adding muted=1 for the best cross-device result, or use the Google Drive Video Player tool for more reliable autoplay handling.

Similar Posts