14

I am searching for a way to embed Google Drive videos using the HTML5 <video> tag. The current option isn't exactly adequate for what I'd like to do with the player. The embedded link directly from Google Drive doesn't seem to allow you to remove the button that opens the video in a separate tab nor customize the appearance of the player. Are there any ways to get the actual file from a drive link and embed it into an HTML <video> tag?

I'm aware of such "proxy player" scripts but they appear very sketchy and pricey. The old methods such as getting the download link no longer work nor does the /get_player method. Any insight would be much appreciated.

Razor
  • 1,778
  • 4
  • 19
  • 36
kpjVideo
  • 413
  • 2
  • 6
  • 21
  • Possible duplicate of [How to embed videos from Google drive to webpage?](https://stackoverflow.com/questions/40951504/how-to-embed-videos-from-google-drive-to-webpage) – Mr.Rebot Jan 06 '18 at 09:28

5 Answers5

32
<video>
    <source src="https://drive.google.com/uc?export=download&id=videoID" type='video/mp4'>
</video>

Replace "videoID" in the link with your video ID. (to find it - right click on the Google Drive video, get shareable link)

pejey
  • 449
  • 4
  • 5
  • I see a player but no playable video in your example @pejey. Is it broke or is the video no longer valid? – Mr. Boy May 21 '19 at 12:11
  • 5
    I removed the video, sorry. Here is a new example - http://jsfiddle.net/xav8kufe/ – pejey May 21 '19 at 12:20
  • 7
    -1 Please note that this will only work with small files ( < 100 MB ). 1) Google Drive requires a `confirm` parameter if the file is > 100MB, which you can't know beforehand. 2) You're basically "downloading" the video into the player. The video player can break if user tries to seek further into the video. – YTZ Jul 30 '19 at 21:07
  • 2
    use [this](https://www.wonderplugin.com/online-tools/google-drive-direct-link-generator/) to convert Google drive link to direct downloadable link. It will work fine for files larger than 100MB if you provide your Google `apiKey`. – Sayooj Nov 29 '19 at 05:39
  • As @YTZ mentioned, this method will only work for files <= 100MB. See my answer on this below for both Google Drive and Google Photos. – Razor Jan 21 '20 at 03:12
  • I test my own video link, it on my localhost and in got `Cross-Origin Read Blocking (CORB) blocked cross-origin response` but your link works, do you know why – Salem Mar 22 '23 at 08:40
  • Hi @Salem please, share the code or video ID – pejey Jun 08 '23 at 11:13
5

I wrote an answer to a similar question not long ago. It's a pretty straight-forward procedure and works on files of any size. If you have any questions, feel free to ask in the comments.

Razor
  • 1,778
  • 4
  • 19
  • 36
3

Gdrive video on your site with controls:

<video class="gdriveVideo" preload="auto" controls>
   <source src="https://drive.google.com/uc?export=download&id=_________" type='video/mp4'>
</video>

where "_________" you can get from "Share link" of the file:

Example: your share link is:

https://drive.google.com/file/d/1KZrZm1lw4LcRIHzIWiR1BCij35XT3Kpi/view?usp=sharing

"_________" here is 1KZrZm1lw4LcRIHzIWiR1BCij35XT3Kpi

bonus:

gdriveVideo class you can use to set some custom style in css:

.gdriveVideo {
  width:730; 
  height:415; 
}
Andrew_STOP_RU_WAR_IN_UA
  • 9,318
  • 5
  • 65
  • 101
0

Try this

<iframe src="https://drive.google.com/file/d/VideoID/preview" width="600" height="480"></iframe>

Replace VideoID with your google drive video id

Ashok Chowdary
  • 101
  • 1
  • 7
-1

1 you take the video link, example: https://drive.google.com/file/d/1cUhj0mYvf5mTPOaXsDlrdrESSNolqiVP/view?usp=sharing

2 you replace the characters that are after the last slash by preview example: https://drive.google.com/file/d/1cUhj0mYvf5mTPOaXsDlrdrESSNolqiVP/preview

3 use iframe:

<iframe width="100%" height="100%" src="https://drive.google.com/file/d/1cUhj0mYvf5mTPOaXsDlrdrESSNolqiVP/preview"></iframe>
David Mejia
  • 19