17

I'm trying to load a video on a web page and for YouTube embed code it works. However, when I replace the src in the code with a Google Drive Link of a video (with sharing turned on), nothing comes up. I mean, there is no error but its blank. Why does nothing come up here? How can I get this Google drive video to also to load on my webpage? I dont want to have to paste the url manually in chrome.

THIS DOES NOTHING:

<html>
<head>
</head>
<body>
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/view?usp=sharing"></iframe>
</body>
</html>

The YouTube version works perfectly:

<html>
<head>
</head>
<body>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/UTt33udwRw0" frameborder="0" allowfullscreen></iframe>
</body>
</html>

How do I get the video from Google drive to play on my web page like how the YouTube video plays? If it cant be directly embedded - what alternatives can be used to get the video to appear - iframe is clearly not working, there must be some alternatives.

Also, anyone know how to make it autoplay?

Thanks

Dr Confuse
  • 605
  • 1
  • 7
  • 24

2 Answers2

32

EDIT: September 2022

It seems at some point since this answer was first posted, autoplaying has stopped working. As it currently stands, the video player attempts to autoplay but fails to load, indicating that this is probably a bug. I've not yet found a suitable alternative.

Original Answer

You need to use the Google Drive Embed option. This is the URL you are looking for: https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview

<html>
<head>
</head>
<body>
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview"></iframe>
</body>
</html>

You can make it autoplay by appending ?autoplay=1 to the URL so it is now https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview?autoplay=1.

robere2
  • 1,689
  • 2
  • 16
  • 26
  • 1
    Hey frog, that worked. Where did you find this, I couldn't find the embed option in my G Drive anywhere. Thanks man. – Dr Confuse Dec 03 '16 at 19:33
  • 1
    In the top right, click on the little 3 vertical dots and then click "Embed item..." – robere2 Dec 03 '16 at 19:37
  • 1
    Also, you can make it autoplay by appending `?autoplay=1` to the url so it is now `https://drive.google.com/file/d/1pdvh_mEnkXPKA3jivYIpYKTaoukxH5p3Yg/preview?autoplay=1`. Editing this into my main post, didn't see you ask how to do that the first time. – robere2 Dec 03 '16 at 19:39
  • Yeah I got the autoplay thing but the embed option is really weird. Not able to find it at all. – Dr Confuse Dec 03 '16 at 19:46
  • Can you share a screenshot or something? – Dr Confuse Dec 03 '16 at 19:46
  • 2
    I was checking it directly from drive. Need to open the video in new tab or use the sharing link in another tab and check the menu there. Got it. Thanks for being awesome Bugfroggy!! – Dr Confuse Dec 03 '16 at 20:03
  • Embed code is not working in FireFox 52.0.2 (32-bit) . Any solution? – Tahir Yasin Apr 13 '17 at 18:45
  • 1
    I just wanted to add - under the three dots - you need to click on "open new tab" and then you will see an additional three dots and one of the items is "Embed item" this is where you will find the link you can embed! – Harry Jun 19 '18 at 10:42
  • 2
    autoplay gets stuck in forever loading – Earlee Feb 15 '19 at 04:18
  • Hi do you know how to do this using a link like https://youtube.googleapis.com/embed/?status=ok&hl=en&allow_embed=0&ps=docs&partnerid=30&autoplay=0&docid=1aUJWCNwftLtuXZ2QRMVMIh6cNAlv8VjF – B''H Bi'ezras -- Boruch Hashem Mar 27 '19 at 03:02
  • Are there any other parameters you can add? Change control colours or add a thumbnail to the start before play? – pinkp Jan 16 '20 at 14:54
  • this is not working, I am providing my working solution below – Maahi Bhat Sep 09 '21 at 10:02
2

By using IFRAME

    <iframe src="https://drive.google.com/uc?export=preview&id=1Um_zcEVWd0Wi7B1dsWGf7ixiXTdoFYMm" width="640" height="480" allow="autoplay"></iframe>

By Using Video Tag

<video width="320" height="240" controls>
<source src="https://drive.google.com/uc?export=preview&id=1Um_zcEVWd0Wi7B1dsWGf7ixiXTdoFYMm" type="video/mp4">
Your browser does not support the video tag.
</video>
Just replace id value with your google drive file id, which you can get from google drive. Follow Steps:
  1. Open Video Preview in google drive.
  2. On the 3 Dots from top left screen, click to open in new window.
  3. Click the 3 dots again, and in opened menu this time you'll see Embed item option & Click on that.
  4. Now you'll get an iframe tag copy only video id from the link.
  5. Then change setting of this video to anyone can view.

Happy Video Embed :-)

Maahi Bhat
  • 191
  • 12