Scholastica Moodle Theme
  • Scholastica
  • Requirements
  • Getting started
    • Theme Installation/Update
    • Translations
    • Demo content
    • RTL Interface
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text
    • Paid Courses
    • Course Page
    • Custom Enrollment Page
    • Course Filter
    • Custom E-Mail Template
  • Theme Settings
    • General
    • Dark Mode
      • 🌑Show/hide on the Dark Mode
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
    • Front Page Blocks
      • 🕶️Show/hide for non-logged in users
      • Block Order
      • Video Pop-up
      • Hero
        • Block #1
        • Block #2 (Hero Video)
        • Block #3
      • FAQ
        • Block #4
        • Re-usage FAQ Snippet
      • Grid Content
        • Grid Content #1
        • Grid Content #2
        • Grid Content #3
        • Grid Content #4
        • Grid Content #5
        • Grid Content #6
        • Grid Content #7
        • Grid Content #8
        • Grid Content #9
      • Content
        • Content #1
        • Content #2
        • Content #3
        • Block #5 - Logotypes
      • Categories & Icons List
        • Categories List #1
        • Categories List #2
        • Logotypes List #1
        • Course List
        • Icons List
      • Stats
        • Stats #1
        • Stats #2
      • Team
        • Team #1
        • Team #2
        • Team #3
      • Testimonials
        • Testimonials #1
        • Testimonials #2
        • Testimonials #3
      • How to add more item to blocks?
    • Top Bar
    • Footer
    • Custom alert
    • Advanced settings
    • Google/Custom Fonts and GDPR
    • Default Moodle Footer Links
  • More
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page
  • Which youtube URL?
  • How to use multiple video pop-up player?

Was this helpful?

  1. Theme Settings
  2. Front Page Blocks

Video Pop-up

PreviousBlock OrderNextHero

Last updated 1 year ago

Was this helpful?

<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>

Which youtube URL?

On YouTube in the embedded section.

How to use multiple video pop-up player?

Replace

  1. (line 4) id="video-popup-2",

  2. (line 19) href="#video-popup-2"