Home Forums Porto Template Looking to use button to launch video

This topic contains 2 replies, has 2 voices, and was last updated by  lstein4 7 months, 3 weeks ago. This post has been viewed 273 times

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

    lstein4
    Participant

    I am starting with the Index-classic template.
    Using the class=”btn btn-lg btn-primary”

    How can I use the button to launch a video (on my webserver not YouTube) – ideally in a lightbox if on PC, but full frame if responsive on a Mobil device (or anything similar) ???

    Thoughts?

    Thanks!

    Code for the button:

    <div class=”home-intro” id=”home-intro”>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-md-6″></div> <div class=”col-md-6″>
    <div class=”get-started”>
    See the Video
    ….



    Template Version: 5.5.0
    #10019875

    Support
    Keymaster

    Hello,

    Here’s an example (using local video, HTML5 format video):

    HTML:

    <a href="#video-01" id="openVideo">Open Video</a>
    						
    <div id="video-01" class="video-popup mfp-hide">
        <video preload="auto" poster="video/light.jpg">
            <source src="video/light.mp4" type="video/mp4">
        </video>
    </div>

    JS:
    (js/custom.js)

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

    CSS:
    (css/custom.css)

    .video-popup {
    	padding: 0;
    	text-align: left;
    	margin: 0 auto;
    	width: 100%;
    	height: 100%;
    	max-width: 800px;
    	max-height: 600px;
    	background: #FFF;
    	position: relative;
    }
    
    .video-popup video {
    	width: 100%;
    	height: 100%;
    	max-width: 800px;
    	max-height: 600px;
    }

    Best Regards,

    Jonas


    #10020139

    lstein4
    Participant

    This worked great – Thank you !


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