# Video Pop-up

<figure><img src="https://2303389692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFXzbdpVhyxdIy0lIThMp%2Fuploads%2F2l9pJwyLDfTI6wYpiTup%2Fvideo-popup-moodle.png?alt=media&#x26;token=495dd6eb-bbe1-43d0-bdbe-14ce3b167cdc" alt=""><figcaption></figcaption></figure>

{% code overflow="wrap" lineNumbers="true" %}

```html
<div class="wrapper-md px-4 px-lmd-0 text-center text-md-left d-flex justify-content-center">
  <div class="d-md-inline-flex flex-wrap justify-content-center justify-content-md-start align-items-center">
    <div>
      <div id="video-popup-2" class="video-container mx-auto" style="background-image: url('https://roseathemes.com/scholastica/1/pluginfile.php/1/theme_scholastica/scholasticasettingsimgs/0/shubham-dhage-1CMtCk34RBU-unsplash.jpg');">
        <a class="vpopup-play" href="#video-popup">
          <i class="fas fa-play-circle"></i>
        </a>
      </div>
      <div id="video-popup">
        <div class="vpopup">
          <iframe
            class="vpopup-video"
            src="https://www.youtube.com/embed/5GrQJGQWfd8?si=cAqJF9YMO95Lmyd2"
            height="100%"
            allowfullscreen="allowfullscreen"
          ></iframe>
        </div>
        <div class="vpopup-close">
          <a href="#video-popup-2"> <i class="fas fa-times-circle"></i> </a>
        </div>
      </div>
    </div>
    <div class="mt-4 mt-md-0 mx-4">
      <p class="mb-1 font-weight-bold">The Scholastica is dedicated only to Moodle 4.3 and later.</p>
      <p class="small">
        Need help with theme customization?<br />Or do you want to report a bug?
      </p>
      <a class="btn btn-dark my-1" href="https://1.envato.market/OR707N" target="_blank" rel="noopener">Get this theme!</a>
    </div>
  </div>
</div>
```

{% endcode %}

### Which youtube URL?

On YouTube in the embedded section.

<figure><img src="https://2303389692-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFXzbdpVhyxdIy0lIThMp%2Fuploads%2F4UTJgfTWdYVn5NIJsjzU%2FZrzut%20ekranu%202024-03-27%20o%2012.43.30.png?alt=media&#x26;token=2ffb20e4-9cbf-45c1-bcee-cb7083602e1d" alt=""><figcaption></figcaption></figure>

### How to use multiple video pop-up player?

Replace&#x20;

1. (line 4) id="video-popup-2",&#x20;
2. (line 19) href="#video-popup-2"