Im really new to JavaScript and I started a new project that consists in a video player and editor.

I have this modal Box:

<div class="modal" id="myModal">
  <div class="modal-header">
     </div>
     <div class="modal-body">
        <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>
     </div>
     <div class="modal-footer">
  </div>
</div>

And I have this video previews that I've done like this:

<article hover class="thumb">
    <div id="myModal" class="modal">
        <div class="modal-content" id="ModalVideo">
            <span class="close">&times;</span>
        </div>
    </div>
    <img src="images/thumbs/eminem.jpg" class="image" alt="">
    <div class="video" id="ClickHere"><video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"></video></div>
</article>
<article hover class="thumb">
    <div id="myModal" class="modal">
        <div class="modal-content" id="ModalVideo">
            <span class="close">&times;</span>
        </div>
    </div>
    <img src="images/thumbs/eminem.jpg" alt="" class="image" />
    <div class="video" id="ClickHere"><video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"></video></div>
</article>

What I need is this: When the user clicks on the <div class="video"> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.

For that I've tried to do this in JavaScript:

<script>
function Video()
{
    var Source = $("#video1 source").attr("src");
    $('#ModalVideo video source').attr('src', Source);
    $("#ModalVideo video")[0].load();
}
</script>

Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?

Thank you for your help, if you have any questions or suggestions please address them to me.

Im really new to JavaScript and I started a new project that consists in a video player and editor.

I have this modal Box:

<div class="modal" id="myModal">
  <div class="modal-header">
     </div>
     <div class="modal-body">
        <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>
     </div>
     <div class="modal-footer">
  </div>
</div>

And I have this video previews that I've done like this:

<article hover class="thumb">
    <div id="myModal" class="modal">
        <div class="modal-content" id="ModalVideo">
            <span class="close">&times;</span>
        </div>
    </div>
    <img src="images/thumbs/eminem.jpg" class="image" alt="">
    <div class="video" id="ClickHere"><video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"></video></div>
</article>
<article hover class="thumb">
    <div id="myModal" class="modal">
        <div class="modal-content" id="ModalVideo">
            <span class="close">&times;</span>
        </div>
    </div>
    <img src="images/thumbs/eminem.jpg" alt="" class="image" />
    <div class="video" id="ClickHere"><video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"></video></div>
</article>

What I need is this: When the user clicks on the <div class="video"> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.

For that I've tried to do this in JavaScript:

<script>
function Video()
{
    var Source = $("#video1 source").attr("src");
    $('#ModalVideo video source').attr('src', Source);
    $("#ModalVideo video")[0].load();
}
</script>

Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?

Thank you for your help, if you have any questions or suggestions please address them to me.

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 7, 2017 at 20:21 Carsten Løvbo Andersen 27k1010 gold badges5050 silver badges7979 bronze badges asked Jan 7, 2017 at 18:42 Mr.ToxyMr.Toxy 36744 silver badges1919 bronze badges 3

• You have repeated ids like: id="ClickHere" – Alvaro Commented Jan 7, 2017 at 18:46
• Yes I meant to do that because the action must occur everytime the user clicks the div. So if I have múltiple divs doing the same thing If I attribute the same id to those divs it will work when the user clicks the div. I could probably use the class tho – Mr.Toxy Commented Jan 7, 2017 at 19:25
• 3 You shouldn't have duplicated ids. – Alvaro Commented Jan 7, 2017 at 19:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

<div id="myModal" class="modal">
    <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

If you have a basic modal, you can change the source of video and start to play.. but first, stay away to use same id into different tags in same page. Second; to use "this" as a parameter, is more simple way to catch clicked div or another tag...

<article :hover class="thumb" onclick="Video(this)">
  <img src="images/thumbs/eminem.jpg" class="image" alt="" data-video-src="images/movie.mp4.mp4" data-autoplay=1 data-muted=1 />
</article>
<article :hover class="thumb" onclick="Video(this)">
  <img src="images/thumbs/eminem.jpg" alt="" class="image" data-video-src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" data-autoplay=1 data-muted=1 />
</article>

When you use "this" as a parameter, dont need any id to find which div was clicked.

<script>
   function Video(t){
        var src = $(t).attr("data-video-src");
        var autoplay = $(t).attr("data-autoplay");
        var muted = $(t).attr("data-muted");

        if(muted==1)
           $("#video1").attr("muted",true);
        else
           $("#video1").removeAttr("muted");

        $("#video1").find("source").attr("src",src);

        if(autoplay==1){
           $("#video1").attr("autoplay",true);
           $("#video1").play();
        }else{
           $("#video1").removeAttr("autoplay");
           $("#video1").pause();
        }

   }
</script>

change <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video> to <video src="images/movie.mp4.mp4" autoplay muted id="videoPreview"></video> first.

Attach this function to all your div's of class="video" click event

function Video()
{
    var Source = this.getElementsByTagName("video")[0].src;
    videoPreview.src = Source;
}

You're on gears now.