Home Forums Porto Template Videos

This topic contains 2 replies, has 2 voices, and was last updated by  Sascha_Khan 4 months, 1 week ago. This post has been viewed 253 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10020980

    Sascha_Khan
    Participant

    I tried the following Support code:

    — START —
    .JS:

    $('#openVideo').magnificPopup({
        type: 'inline',
        callbacks: {
            open: function() {
    
                $('html').css('margin-right', 0);
    
                $(this.content).find('video')[0].play();
    
            },
            close: function() {
    
                $(this.content).find('video')[0].load();
    
            }
        }
    });

    HTML:

    <a href="#video-01">Open Video</a>
     
    <div id="video-01" class="white-popup-block mfp-hide">
        <video controls preload="auto" width="100%" height="100%">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </video>
    </div>

    — END —

    This sample above works only with one mp4. How can a realize it with ten different videos?

    Thank you


    • This topic was modified 4 months, 1 week ago by  Support2.
    #10020985

    Support2
    Keymaster

    Hello, thanks for your purchase.

    Here is the code that you need to play more than one video.

    HTML:

    <a class="openVideo" href="#video-01">Open Video</a>
    <a class="openVideo" href="#video-02">Open Video2</a>
    <a class="openVideo" href="#video-03">Open Video3</a>
    
    <div id="video-01" class="white-popup-block mfp-hide">
        <video controls preload="auto" width="100%" height="100%">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </video>
    </div>
    
    <div id="video-02" class="white-popup-block mfp-hide">
        <video controls preload="auto" width="100%" height="100%">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </video>
    </div>
    
    <div id="video-03" class="white-popup-block mfp-hide">
        <video controls preload="auto" width="100%" height="100%">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        </video>
    </div>

    * Note that i used the same video for the 3 examples above, but you can change the url of videos to test with diferent videos.

    JS:

    $('.openVideo').magnificPopup({
        type: 'inline',
        callbacks: {
            open: function() {
    
                $('html').css('margin-right', 0);
                console.log($(this.content));
    
                $(this.content).find('video')[0].play();
    
            },
            close: function() {
    
                $(this.content).find('video')[0].load();
                 console.log($(this.content));
    
            }
        }
    });

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 4 months, 1 week ago by  Support2.
    #10020987

    Sascha_Khan
    Participant

    Hi Rodrigo,

    your code snippet works fine.

    Thank you!


Viewing 3 posts - 1 through 3 (of 3 total)