How can I make a Bootstrap 4 modal autoplay an iframe on page load?

My website features a full-screen background video that plays upon loading, and I want the same video to play when a user clicks the play button to open a modal. However, my issue is that the modal video (iframe) starts playing in the background as soon as the page loads. This is not the desired behavior. I want the sequence to be: 1. Page loads with muted background video 2. User clicks play button 3. Modal opens and the video plays 4. Video stops when modal closes. I have tried using autoplay=0, which works when directing to a YouTube source video, but this particular video is located in my project folder.


 <!-- banner -->
 <section class="vid">
  <div class="video-container">
    <video class="bg-video" autoplay muted loop>
     <source src="video/americandream.mp4" type="video/mp4">
     Your browser does not support video playback.
    </video>
  </div>
  <div class="container-fluid banner">
   <div class="row">
    <div class="col-lg-12 motto text-white">
     <h1 class="banner-heading">
      <span class="overlay-heading">We Believe <br> People Make<br> The Difference</span>
     </h1>
     <div class="d-flex align-items-center mt-4">
      <a class="btn btn-primary btn-demo-top btn-wide demo mb-2 mr-md-2" href="demo.html">Book a Demo</a>
      <a href="#" class="launch-modal media align-items-center u-media-player" data-modal-id="modal-video">
       <span class="d-flex mr-2 ml-3">
        <span class="u-media-player__icon u-media-player__icon--success">
         <span class="fa fa-play u-media-player__icon-inner"></span>
        </span>
       </span>
       <span class="media-body text-white  u-media-player__icon--success">Play Video</span>
      </a>
     </div>
    </div>
   </div>
  </div>
 </section>
<!-- end of Banner -->

<!-- MODAL -->
  <div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="video/americandream.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
<!-- END MODAL -->
jqueryhtmlcsstwitter-bootstrap

Answer №1

It is uncertain whether an iframe is necessary for playing your video file, but if not, using the <video> tag in this example should provide the functionality you seek.

$('.launch-modal').click(function() {
  $('.modal').fadeIn(200, function() {
  $('#sample-video').get(0).play()
  });
});

$('.close').click(function() {
  $('.modal').fadeOut(100, function() {
  $('#sample-video').get(0).pause();
  });
});
.bg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.banner {
  position: relative;
  background-color: #fff;
  text-align: center;
  padding: 20px;
  margin: 250px 50px 0px;
}

.modal {
  display: none;
  position: fixed;
  width: 33.3%;
  left: 33.3%;
  top: 200px;
}


.modal video {
  max-width: 100%;
  max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- banner -->
<section class="vid">
  <div class="video-container">
    <video class="bg-video" autoplay muted loop>
     <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
     Your browser is not supported
  </video>
  </div>
  <div class="container-fluid banner">
    <div class="row">
      <div class="col-lg-12 motto text-white">
        <h1 class="banner-heading">
          <span class="overlay-heading">We Believe <br> People Make<br> The Difference</span>
        </h1>
        <div class="d-flex align-items-center mt-4">
          <a class="btn btn-primary btn-demo-top btn-wide demo mb-2 mr-md-2" href="demo.html">Book a Demo</a>

          <a href="#" class="launch-modal media align-items-center u-media-player" data-modal-id="modal-video">
              <span class="d-flex mr-2 ml-3">
                <span class="u-media-player__icon u-media-player__icon--success">
                  <span class="fa fa-play u-media-player__icon-inner"></span>
                </span>
              </span>
              <span class="media-body text-white  u-media-player__icon--success">
                Play Video
              </span>

            </a>
        </div>

      </div>
    </div>
  </div>
</section>
<!-- end of Banner -->


<!-- MODAL -->
<div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <div class="modal-video">
          <div class="embed-responsive embed-responsive-16by9">
            <video id="sample-video">
     <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
     Your browser is not supported
  </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--END MODAL -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to extract an integer from a particular format of ID string using JavaScript

Extracting ID variables from a text box, where these variables are subject to change: SC00021 var IdCode1 = "SC00021"; var res = IdCode1.slice(5, 7); Output: 21 Is there a way to automatically determine the position following the zeros? ...

javascriptjquerystringslice

Preventing Time Limit Reset on Page Refresh with Jquery/Javascript

I'm encountering an issue with the time limit on my online quiz program. Whenever the page is reloaded or refreshed, the time limit resets. I have implemented this time limit in my online quiz program using a PHP header('Location:') to prog ...

javascriptphpjquerytime

Unleash the power of attribute selectors in a SASS/SCSS list variable: a comprehensive guide!

This is a sample code snippet: $list: ( input[type="text"], input[type="name"], input[type="email"], textarea, select[multiple] ) !default; @each $value in $list { ...

csssass

The webpage at 'https://abcd.ac.in/' has been declined to be displayed in a frame due to the 'X-Frame-Options' being set to 'sameorigin'

When attempting to load a website within an iframe, I encountered an error in the console stating "Refused to display 'https://abcd.ac.in/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Despite trying other alte ...

htmlangulariframeangular8

Struggling to access a PHP variable in a JavaScript file through AJAX

After studying numerous examples on how to pass a PHP variable to a JavaScript file, I have yet to successfully accomplish it. This is my PHP file: $title = $json["title"]; echo json_encode($title); And here is my app.js JavaScript file: $.ajax({ ...

javascriptphpjqueryajaxjson

Turn off and then turn on user input without exiting the textarea

I've been working on a small project that requires me to enable and disable text input in a textarea using key commands, similar to Vi/Vim's insertion and command modes. However, I'm struggling to find an elegant solution. Disabling the tex ...

javascriptjqueryhtml

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

javascriptangularjshtmlaccessibilityvoiceover

What is the best way to pass the record ID of the row when the user clicks on the edit button?

The substance ID saved to the session is always the last record ID in the table. I need to send the record ID of the row when the user presses the edit button. Currently, every time a button is selected, the record ID sent is the last one in the table. I ...

phphtml

Which specific CSS attributes should be applied to create a scroll bar within this table?

Below is the table that I am working with: 'table' I want to ensure that its width remains the same even when the screen size is reduced, and only add a scroll bar to view it. I have already included overflow: scroll; in the container <div> ...

htmlcsshtml-tablescroll

What's the reason behind CSS transitions starting with a black background?

When I apply a transition to the heart, it inexplicably turns black at the start of the animation before displaying the intended gradient effect. Below is the code snippet: .heart { font-size: 2.5rem; padding-right: 2rem; } .heart:hover ...

htmlcss

Choosing the right CSS selectors for elements within other elements

I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...

htmlcsscss-selectors

Employing the jquery get method to retrieve a webpage containing a contact form

I have created a simplified example to illustrate the issue I am facing. The HTML code in question is shown below: <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script& ...

jquery

Tips on creating a responsive absolute div

I'm currently working on creating a profile component with Material UI and React.js. I'm having trouble making the Avatar/profile photo and profile name div responsive. Here are some screenshots to illustrate my issue: The specific div that need ...

javascriptcssreactjstwitter-bootstrapmaterial-ui

Aligning two identical components within the same container when triggered by a single click

Currently, I am exploring Angular 2 and Typescript and have been developing a pager component for a table. The pager functions correctly, but I have encountered an issue with having two pagers - one above the table and one below it. When the next button on ...

htmlangulartypescriptcomponents

Can file input buttons be custom styled?

Since I am using Material-UI, the traditional methods are not working for me. I have a form with two buttons positioned next to each other. One button is an "Upload File" input for users to upload a file, and the other is a submit button. I want both butto ...

javascriptcssuser-interfacematerial-ui

Update the span's content according to the user's input

Is it possible to update the value of a span to match that of an input field in HTML? HTML: <p style='font-size:150%'> Hey friend, I am <span id='name_display'>Anonymous</span>, I'd like to invite you to..... &l ...

javascriptjqueryhtml

The switch statement remains unchanged for varying variables

Here is some code that I am working with: updateTable(selectedIndex) { console.log("running updateTable function"); let level = ''; // if (selectedIndex == 1){ // this.setState({level: 'day'}) // th ...

javascripthtmlreactjsswitch-statement

the status of the XMLHttpRequest Object within the realm of jQuery AJAX

When using traditional JavaScript AJAX, we monitor the readystate property to determine the status: 0 - The request is not initialized 1- The request has been set up 2 - The request has been sent 3 - The request is in process 4 - The request is compl ...

javascriptajaxjquery

What is the correct method for adjusting the height properties of an element?

I'm trying to adjust the height of my div using the code below var heightMainDiv = window.innerHeight - 50; var myDiv = $("#main_content")[0]; myDiv.clientHeight = heightMainDiv; myDiv.scrollHeight = heightMainDiv; However, the values of clientHeigh ...

javascriptjquery

What obstacles must be overcome when developing a CSS framework?

Currently, I am delving into the realm of popular CSS frameworks such as Bootstrap and Foundation. While studying them, I have identified aspects that I believe could be enhanced and customized to suit my own projects or potentially for free distribution i ...

csscss-frameworks