How to embed Google Drive videos in custom sidebar for Google Sheets or Docs

Other Questions Google drive
1

I’m trying to create a custom sidebar in Google Sheets that displays instructional videos stored in Google Drive. I know that YouTube videos work fine in sidebars, but I specifically need to use videos from Google Drive, not YouTube.

function displayCustomSidebar(){
  var htmlOutput = HtmlService.createHtmlOutputFromFile("customSidebar")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setWidth(350)
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

For YouTube videos, this iframe approach works perfectly:

<iframe width="300" height="200" src="https://www.youtube.com/embed/videoID">
</iframe>

However, when I try to embed Google Drive videos using the HTML5 video tag, it doesn’t work:

<video width="300" controls>
    <source src="https://drive.google.com/file/d/myFileID/preview" type="video/mp4">
    Video not supported by your browser.
</video>

I’ve tried various Google Drive sharing URLs and embedding methods, but none seem to work in the sidebar context. The user needs to view the video directly within the sheet without opening new tabs or windows. Has anyone found a working solution for this?

2

I had the same problem building internal training tools. Google Drive’s auth requirements clash with Apps Script’s sandbox - that’s what’s causing your headache. Here’s what worked for me: use the Drive API with a doGet function to serve the video directly. Deploy a web app that grabs the video file with DriveApp.getFileById() and serves it as a blob with the right MIME headers. Point your video tag’s src to your web app URL and pass the file ID as a parameter. This dodges CORS issues since you’re serving from your own Apps Script domain. You’ll need to enable the Drive API service first, but once that’s done, videos load cleanly in sidebars without Google’s UI mess getting in the way.

3

Hit this same issue a few months back. Use the webViewLink from the Drive API, but swap /view with /preview at the end. Works way better than regular sharing links for iframe embeds in Apps Script sidebars. Just set your width/height properly or you’ll get weird sizing issues.

4

Had this exact problem last year building a training dashboard. Google Drive videos have CORS restrictions that block direct embedding in custom HTML sidebars, even with preview URLs. Here’s what worked for me - use the Drive embed URL but wrap it in an iframe instead of a video tag: . Make sure your video’s sharing is set to “Anyone with the link can view” - this is crucial. MP4 files work way better than other formats too. One downside - you’re stuck with Google’s branding and controls, unlike YouTube embeds where you get more customization. But it’ll display your video in the sidebar without opening new tabs.