First ever deck - but how to add a web video with just URL?

Anki Card Design
1

I want to create a deck which will act as a sign language dictionary, i.e. Front= word, Back=video.

I'm planning to use the SignBSL.com website which has an extensive library of videos. I don't intend copying their videos to a local media folder but want to use the URL, e.g.

<p>https://media.signbsl.com/videos/bsl/signstation/about.mp4</p>

The website itself offers the following code to embed their videos on your website:


```
<blockquote class="signbsldata-embed" data-vidref="4eqcyfg7vk">

<a href="https://www.signbsl.com/sign/about">Watch how to sign 'about' in British Sign Language</a>
</blockquote>
<script async src="https://embed.signbsl.com/widgets.js" charset="utf-8"></script>
```

How do I get that video to play on the card itself, I,e, without opening another window or app?

Your forbearance with an absolute novice would be much appreciated.

1 Like
2

I should have mentioned, the videos are silent (not saying there isn’t an audio track, just that I don’t need any sound)

3

First, read this section of the manual if you don’t know what notes, fields, etc are.

Next, create a new field Link and add the following to the card template:

<iframe frameborder=0 src="{{Link}}"></iframe>

Now all you have to do is paste the link into that field. Do that for every note.

3 Likes
4

Thank you, friend, I will try this out.

1 Like
5

I tested an iframe and it doesn’t work with the links they’re providing.

Instead of an iframe, you should copy-paste the code on their website, which works on my end (but takes time to load).

Try this for example, the embed works as expected.

<blockquote class="signbsldata-embed" data-vidref="wqlzxgcxs6">
<a href="https://www.signbsl.com/sign/about">Watch how to sign 'about' in British Sign Language</a>
</blockquote>
<script async src="https://embed.signbsl.com/widgets.js" charset="utf-8"></script>
1 Like
6

This is the card I created:

Screen Shot 2025-07-13 at 14.59.17 pm
Screen Shot 2025-07-13 at 14.59.17 pm1196Ă—502 50.5 KB

This is the displayed result:

Screen Shot 2025-07-13 at 15.01.35 pm
Screen Shot 2025-07-13 at 15.01.35 pm646Ă—555 18 KB

I’ll try sorata’s suggestion

7

For future ref, they were talking about putting the iframe part inside your templates. You can’t refer to another field inside a field, so {{Link}} would only work if you did it directly in the card templates.

8

Thanks, Sorata, I tried pasting that into the “Back” field but Preview just shows the code

9

Try pasting that into the HTML view, after clicking <> icon. Does that work?

10

It works for me using the link https://media.signbsl.com/videos/bsl/signstation/about.mp4 which jonke9 posted.

11

Ah, I didn’t see the video URL. In any case though, I think following the official route is better. Some websites like YT don’t support embeds with their regular links, instead they have special embed links.

12

I’m sorry I lack the expertise to follow your instructions, @sorata . It did move things on a bit inasmuch as this coding:

Screen Shot 2025-07-13 at 16.37.10 pm
Screen Shot 2025-07-13 at 16.37.10 pm1099Ă—480 56.2 KB

gets me this result:

Screen Shot 2025-07-13 at 16.38.22 pm
Screen Shot 2025-07-13 at 16.38.22 pm641Ă—560 20.1 KB

13

Click on “Cards…” then add the code I mentioned in my first reply there. Also, since you added a “link” field with lower case “l”. Either change the “Link” in my code to “link” or capitalize your field name.

Then paste the link to the video into the link field.

14

@ZornHadNoChoice

I’m using the MacOS desktop client and I think I’ve followed your instructions (see my posted screenshot below). I’ll try again,

Screen Shot 2025-07-13 at 14.59.17 pm
Screen Shot 2025-07-13 at 14.59.17 pm1196Ă—502 50.5 KB

15

Your screenshot shows something very different from what I posted:

<blockquote class="signbsldata-embed" data-vidref="wqlzxgcxs6"><a href="https://www.signbsl.com/sign/about">Watch how to sign 'about' in British Sign Language</a></blockquote><script async src="https://embed.signbsl.com/widgets.js" charset="utf-8"></script>

I’m not sure if you did a mistake when copy-pasting or its some weird Anki quirk.

You click the “Card” button on top of that screen. And change the underlying code of your note-type.

16

Sorry, @sorata and @ZornHadNoChoice . Novice forum user mistakes by me.

with two guardian angels advising, I’ve been trying both suggestions- I’ll try and clearly flag up whose suggestion I am talking about,

Jon

17

@sorata

This was ZornHadNoChoice’s suggestion, hence the difference in the screenshot. The result of trying your code was shown in message 11/16

18

@sorata

In message #14 you suggest changing the underlying code of my note-type. Given I have a couple of other decks using the same note-type, would I be better creating a new note-type?

19

Yes, I’m aware. I looked at your other message and it didn’t match the embed code completely. The parts at the end were messed up.

Yes, but I was talking about the iframe thing Zorn was talking about. My suggestion was you simply copy paste the embed code from their website, but if you can’t get that to work iframe is a valid option.

20

@sorata

Just tried it on my phone with AnkiDroid and the provided embed code works!

Thanks to you and @ZornHadNoChoice

2 Likes