Can we embed a video placed on Google Drive and how to play such video in our website?

Posted on by Habibie

You can’t directly embed and play a Google Drive video just by using its public shared link. Instead, you need to convert the Google Drive sharing URL into a direct file link.

Steps:

  1. Get the Google Drive File ID:
    • If your shared link is: bashCopyEdithttps://drive.google.com/file/d/FILE_ID/view?usp=sharing
    • Extract the FILE_ID from the URL.
  2. Use a Direct Link Format: bashCopyEdithttps://drive.google.com/uc?export=download&id=FILE_ID
    • This serves as a direct file link that a <video> tag can use.

Here’s the HTML + JavaScript Code:

htmlCopyEdit<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Drive Video Player</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            margin-top: 50px;
        }
        video {
            width: 80%;
            max-width: 800px;
        }
    </style>
</head>
<body>

    <h2>Google Drive Video Player</h2>
    <video id="videoPlayer" controls>
        Your browser does not support the video tag.
    </video>

    <script>
        // Replace with your Google Drive file ID
        const fileID = "YOUR_FILE_ID_HERE";  
        const videoSrc = `https://drive.google.com/uc?export=download&id=${fileID}`;

        document.getElementById("videoPlayer").src = videoSrc;
    </script>

</body>
</html>

Important Notes:

  • Video Format: Ensure the video format is supported by browsers (MP4, WebM, or OGG).
  • Public Access: The video must be publicly accessible or shared with “Anyone with the link” for viewing.
  • Google Drive Download Limitations: If the file is large or accessed frequently, Google might temporarily restrict access.
Post Views: 248