# Show a random video from multiple videos

**URL:** <https://forums.ankiweb.net/t/show-a-random-video-from-multiple-videos/30068>\
**Category:** Card Design\
**Created:** [May 6, 2023, 3:24pm UTC](https://forums.ankiweb.net/t/show-a-random-video-from-multiple-videos/30068 "2023-05-06T15:24:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![video-vocabulary](https://avatars.discourse-cdn.com/v4/letter/v/eb9ed0/32.png) [@video-vocabulary](https://forums.ankiweb.net/u/video-vocabulary)\
**Post date:** [May 6, 2023, 3:24pm UTC](https://forums.ankiweb.net/t/show-a-random-video-from-multiple-videos/30068/1 "2023-05-06T15:24:37Z")

</div>

I have cards where a back card has multiple Sound tags with video files. I want only one of them to be randomly selected and appear on the card. Unfortunately, I haven’t been able to do so.

This is what I tried:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/cb56724de11363284d3eca4a777330d40420de33.jpeg)

Unfortunately it didn’t work, if anyone knows how to do this, please respond.

---

<div class="post-metadata">

**Author:** ![video-vocabulary](https://avatars.discourse-cdn.com/v4/letter/v/eb9ed0/32.png) [@video-vocabulary](https://forums.ankiweb.net/u/video-vocabulary)\
**Post date:** [May 6, 2023, 7:15pm UTC](https://forums.ankiweb.net/t/show-a-random-video-from-multiple-videos/30068/2 "2023-05-06T19:15:35Z")

</div>

Finally I came up with this solution:

```js
<script>
  function getButtons() {
    // For Anki desktop
    var buttons = document.querySelectorAll(".soundLink");
    if (buttons.length) return buttons;
    
    // For AnkiDroid
    return document.querySelectorAll(".replaybutton");
  }

  var buttons = getButtons();
  if (buttons.length) {
    var randomIndex = Math.floor(Math.random() * buttons.length);
    for (let i = 0; i < buttons.length; i++) {
      if (i != randomIndex) {
        // Hide other buttons
        buttons[i].style.display = "none";
      }
    }
  }
</script>

```

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [May 7, 2023, 5:23am UTC](https://forums.ankiweb.net/t/show-a-random-video-from-multiple-videos/30068/3 "2023-05-07T05:23:00Z")

</div>

Nice that you found a solution on your own!

I got two tips for you, though. Scripts should not be included in the fields themselves, but in the card template. And instead of altering attributes/styles directly, it’s better practice to toggle a class on the random replay button and handle the styles in a separate stylesheet. Reason for both of these suggestions is that it will be easier to understand and edit your design when you get back to the code after some time (and for other devs).

Also, there’s no need to use `buttons.length` in the condition because the NodeList itself is being checked for truthiness, meaning it evaluates to `true` if it has elements and `false` if it’s empty.

Example:

### Front / Back Template

```auto
<!-- field content -->

<script>
  // "soundLink": Anki desktop | "replaybutton": AnkiDroid
  var buttons = document.querySelectorAll(".soundLink, .replaybutton");

  if (buttons) {
    const randomIndex = Math.floor(Math.random() * buttons.length);
    buttons[randomIndex].classList.add("active");
  }
</script>

```

### CSS

```auto
.soundLink,
.replaybutton {
  display: none;
}

.soundLink.active,
.replaybutton.active {
  display: inline-block;
}
```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [June 6, 2023, 5:23am UTC](https://forums.ankiweb.net/t/show-a-random-video-from-multiple-videos/30068/4 "2023-06-06T05:23:17Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.