Member-only story
How to Embed Images from Google Drive on Your Website
Introduction
The process of embedding images from Google Drive on a website has faced a recent setback with the 403 Forbidden error. Many users have been relying on the ‘/uc’ path to embed Google Drive images seamlessly, but this method has now become unreliable.
In this article, we’ll explore users' challenges, understand the reasons behind the 403 error, and provide an alternative method for embedding Google Drive images.
Understanding the Issue
The traditional method of embedding Google Drive images using the ‘/uc’ path has encountered difficulties, leading to a 403 Forbidden error. A significant factor contributing to this issue is the discontinuation of third-party cookies, as outlined in a blog post titled “Upcoming Changes to Third-Party Cookies in Google Drive.” This shift has prompted users to seek alternative approaches to embed images effectively.
Alternative Method: Embedding with iframes
To overcome the 403 Forbidden error, users can adopt a different approach by using iframes. Start by opening the desired file in Google Drive, selecting “Open in new window” from the overflow menu, and then choosing “Embed item.” This action generates an iframe HTML tag, which can be added to a website for embedding the image.
Example HTML Code
<iframe src="https://drive.google.com/file/d/1234567890abcdef/preview"></iframe>Customizing the Embed
While the iframe method resolves the 403 issue, it has certain limitations. The default iframe has a background color, and the embedded image is not responsive. Users can customize the appearance by removing the border (style=”border: 0") and adjusting the height and width attributes to match the image dimensions.
There is a service called lienuc.com, which aims to address the 403 issue. I haven’t personally tested it but you can try if it works for you.
Limitations of the iframe Method
- Background color in the iframe.
- Non-responsiveness of the embedded image.
- Presence of elements such as zoom controls.
