Support Dropbox / OneDrive / Google Drive embedded video

[hahahumble]

In addition to Youtube, Vimeo and Prezi videos, is it possible to support shared videos from Dropbox, OneDrive and Google Drive?

I tried to use the Video tag, but it doesn’t seem to work properly.

[tobias]

Hi @hahahumble, thanks for your feature request.

At the moment only the three you mentioned (Youtube, Vimeo and Prezi) are supported. Video html tags will not work.

We will look into adding support for the additional services you mentioned, extending the syntax we have currently. If anyone else would like more embed support specifically for video (for images see this topic here) please mention them below.

[hahahumble]

Just noticed that the Video Tag in the new version is working

[hahahumble]

Now you can even insert maps, Google Docs, and music into your cards

[tobias]

Haha great discovery @hahahumble

While we have improved support for this behind the scenes. We haven’t officially announced this on our release notes as we cannot guarantee cross-device support and future updates may change this behaviour. Regardless, I’m marking this as “Implemented” for now.

[Skoro]

I’m getting this window when trying to embed a Google Drive video

[tobias]

Hi @Skoro, welcome to the Supernotes Community!

This is happening because you are using the wrong Google Drive file link, please make sure you append preview?usp=drivesdk.

https://drive.google.com/file/d/YOUR_FILE_ID_HERE/preview?usp=drivesdk

And please also check that “general access” is enabled for that Google drive file:

So the complete iframe will be as follows:

<iframe src="https://drive.google.com/file/d/YOUR_FILE_ID_HERE/preview?usp=drivesdk"
width="640" height="480" allow="autoplay"></iframe>

While iframes currently work, there may be some unexpected behaviour with some services. If there’s any iframes you use repeatedly let us know and we can look into adding better support

[Skoro]

Hello @tobias! Thanks a lot, it worked. There is a difference between Dropbox and Google Drive embed view:

Dropbox:

Google:

Google one has this ugly frame while Dropbox looks properly, is there a way to fix this?

[tobias]

Hi @Skoro,

The frame is added by Google. We have improved the default border behaviour in the next release.

In the meantime, you can amend the width and style properties of the iframe.

• To make sure it’s full width (and not cropped like in your screenshot) you can amend the width property to be width="100%".
• You can add a style property to remove the border like so style="border: none"

So the complete iframe will be as follows:

<iframe src="https://drive.google.com/file/d/YOUR_FILE_ID_HERE/preview?usp=drivesdk"
width="100%" height="480" style="border: none" allow="autoplay"></iframe>

[Skoro]

Worked perfectly, thank you so much! Glad to hear about the improvements.

Here is some more view issues with Broadsheet view:

Here is on iPhone:

1. Just opened the app
   

   

2. Clicked on play once
   

   

[tobias]

As I mentioned before, iframes are supported, but their behaviour may vary between devices since they rely on the host provider to display the content.

The view issue you’re encountering should be just the image preview, since it’s stretching to be 100% width of the card, once you play the video it should be in the correct size. You can also play around with the style tag, using the max-width css property to prevent over stretching. And you can fix the width of the dropbox link the same way as above. I hope that helps!