Question 44409 in Html Question posted in
Some basic documentation can be found here.

How to embed a <video> tag using Javascript in bootstrap modal? – Html

I am trying to embed a video in a bootstrap modal for an assignment and I haven’t a clue why I cant get it to work.

I tried this iteration

<h3 id = "giza_Pyramid" data-toggle="modal" data-target="#pyramid";>The Giza Pyramids</h3>
                            <p> 
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa eligendi enim suscipit voluptatibus consequatur pariatur aut incidunt quo dicta, cumque quidem iste recusandae esse explicabo modi voluptatem, eum optio.
                            </p>
<script>
if (
  document
    .querySelector("#giza_Pyramid")
    .addEventListener("click", function () {
      document.querySelector("#modal_body").textContent = (
        <video class ="giza_Pyramid" width = "450" height = "350" controls src= "Media/gizapyramids.mp4"></video>
      );
    })
);
</script>

This is basically what I’m using to make it work but when I try it I get a error shown below.
Uncaught SyntaxError: expected expression, got '<'

Any advice on any other functions I can try that would be able to help

Tags:

2

Answers


  1. 0

    Please try this:

    document.getElementById("giza_Pyramid").addEventListener("click", function () {
      document.querySelector("#modal_body").innerHTML = '<video class ="giza_Pyramid" width = "450" height = "350" controls src= "Media/gizapyramids.mp4"></video>';
    })

    Reason to use the innerHTML because the contain have the HTML tags.

    Thanks.

    Login or Signup to reply.
  2. 0

    Instead of setting textContent, set innerHTML of the modal body directly like this:

    <h3 id="giza_Pyramid" data-toggle="modal" data-target="#pyramid">The Giza Pyramids</h3>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa eligendi enim suscipit voluptatibus consequatur pariatur aut incidunt quo dicta, cumque quidem iste recusandae esse explicabo modi voluptatem, eum optio.
</p>

<script>
  document.querySelector("#giza_Pyramid").addEventListener("click", function () {
    const modalBody = document.querySelector("#modal_body");
    modalBody.innerHTML = 
      <video class="giza_Pyramid" width="450" height="350" controls>
        <source src="Media/gizapyramids.mp4" type="video/mp4">
      </video>
    ;
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search