Embed a Google Docs video in your digital garden

How to embed a Google Docs video in your digital garden

If you are using Obsidian as your note-taking app and the Digital Garden plugin as your publishing platform, you might want to embed a video from Google Docs in your notes. In this post, I will show you how to do that using a simple HTML code snippet.

What is a digital garden?

A digital garden is a personal website where you can publish your notes, thoughts, and ideas in a non-linear and interconnected way. It is like a public version of your personal knowledge base, where you can cultivate your learning and share it with others.

One of the popular tools for creating a digital garden is Obsidian, a powerful markdown editor that lets you create links between your notes and visualize them as a graph. Obsidian also has a plugin system that allows you to extend its functionality with various features.

One of these plugins is the Digital Garden plugin, which lets you publish your notes to the web for free, using GitHub and Vercel as the hosting services. You can find more information about this plugin and how to set it up on its GitHub page or its documentation site.

What is an iframe?

An iframe is an HTML element that allows you to embed another web page within your current web page. It creates a nested browsing context, which means that the embedded page has its own document and URL. You can use an iframe to display content from another website, such as a video, a map, or a form.

The syntax for an iframe element is:

<iframe src="URL" title="DESCRIPTION"></iframe>

The src attribute specifies the URL of the page to embed, and the title attribute provides a description of the content for screen readers. You can also use other attributes to control the appearance and behavior of the iframe, such as width, height, allow, loading, etc. You can find more information about the iframe element on W3Schools or MDN Web Docs.

How to embed a Google Docs video in your digital garden?

To embed a video from Google Docs in your digital garden, you need to follow these steps:

  1. Upload your video file to Google Drive and open it in Google Docs.
  2. Click on the "Share" button at the top right corner and choose "Anyone with the link" as the sharing option.
  3. Copy the link and paste it in a new browser tab. You should see something like this:
https://docs.google.com/file/d/1rf6M14paZOb1-NiMX_HnHZP8GGwi2WKZ/edit
  1. Change the word edit at the end of the link to preview and press enter. You should see something like this:
https://docs.google.com/file/d/1rf6M14paZOb1-NiMX_HnHZP8GGwi2WKZ/preview
  1. Copy this link and use it as the value of the src attribute in your iframe element. For example:
<iframe src="https://docs.google.com/file/d/1rf6M14paZOb1-NiMX_HnHZP8GGwi2WKZ/preview" title="Google Docs Video"></iframe>
  1. Add this code snippet to your Obsidian note where you want to embed the video. Make sure to add some frontmatter to indicate that you want to publish this note using the Digital Garden plugin. For example:
---
dg-publish: true
---

<html>
<head>
  <title>Google Docs Video</title>
</head>
<body>
  <iframe src="https://docs.google.com/file/d/1rf6M14paZOb1-NiMX_HnHZP8GGwi2WKZ/preview" width="500" height="300" frameborder="0" allowfullscreen></iframe>
</body>
</html>
  1. Save your note and sync it with GitHub. The Digital Garden plugin will automatically deploy your note to Vercel and make it available on your website.

That's it! You have successfully embedded a Google Docs video in your digital garden. You can adjust the size and style of the iframe element using CSS if you want.

Here is what it looks like:

Google Docs Video

Conclusion

In this post, I showed you how to embed a Google Docs video in your digital garden using Obsidian and the Digital Garden plugin. I hope you found this useful and learned something new.

If you have any questions or feedback, feel free to leave a comment below or contact me on Twitter @assistant.

Happy gardening! 🌱

: https://github.com/oleeskild/obsidian-digital-garden
: https://notes.ole.dev/set-up-your-digital-garden/
: https://www.w3schools.com/tags/tag_iframe.asp
: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe