Highlighted

Pop up Video link not working with youtube only works with original vimeo example that came with template

Contributor ,
Nov 21, 2017

Copy link to clipboard

Copied

Hi I am working on a template and can't figure why my video wont play in the pop up. Originally it had a Vimeo link which worked but it doesn't with my you tube link. Does anyone have any thoughts?

I'm using marketo to host the page and there are some cache issues. You can view the page through this code. All .js, images and css is hosted through them.

-------------------------------

<!DOCTYPE html>

<html lang="en">

    <head>    

 

        <!-- TITLE OF SITE -->

        <title>StartOn - Landing Page Template</title>

 

        <!-- Meta -->

        <meta charset="utf-8">

        <meta name="description" content="StartUp Landing Page Template" />

        <meta name="keywords" content="Treetoper, startup, landing page, gradient background, image background, video background, template, responsive, bootstrap" />

        <meta name="developer" content="TemplateOcean">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <!-- FAV AND TOUCH ICONS   -->

        <link rel="icon" href="images/favicon.ico">

        <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

        <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">

        <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

        <!-- GOOGLE FONTS -->

        <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,700' rel='stylesheet' type='text/css'>

        <link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600' rel='stylesheet' type='text/css'>

        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">

        <!-- BOOTSTRAP CSS -->

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/bootstrap.min.css">

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/plagin.css">

  <!-- Image Slider -->

       <link rel='stylesheet prefetch' href='http://offers.premierinc.com/rs/381-NBB-525/images/bbdbe3bb781b9424610529ffe.css'>

<link rel='stylesheet prefetch' href='http://offers.premierinc.com/rs/381-NBB-525/images/owl.carousel.css'>

      <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/owlstyle.css">

       

 

        <!--   COUSTOM CSS link  -->

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/newstyle.css">

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/newresponsive.css">

       

        <!-- Carousel  -->

      

        <!--[if lt IE 9]>

            <script src="js/plagin-js/html5shiv.js"></script>

            <script src="js/plagin-js/respond.min.js"></script>

        <![endif]-->

       

       <!-- Footer -->

       <style>

  #footer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

background-color: #666666;

padding: 30px 60px;

}

@media screen and (max-width: 768px) {

#footer {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

}

}

.social_icons {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

@media screen and (max-width: 768px) {

.social_icons {

margin: 15px 0 0 0;

}

}

.social_icons div {

margin: 0 0 0 5px;

}

#logo {

width: 216px;

height: 46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);

}

#twiterr_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);

}

#linkedin_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);

}

#insta_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);

}

#youtube_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);

}

#fb_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);

}</style>

     

<style>

  .fa-ul li {

  font-size: 2rem;

  line-height: 4rem;

  font-weight: 400;

  margin-left:0px;

}</style>

      

    </head>

    <body>

        <!-- Start: Navbar Area

        ============================= -->

        <header id="header" style="background-color: #003b49;" class="okayNav-header navbar-fixed-top main-navbar-top">

            <div class="container">

                <div class="row">

                   

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">

                        <a class="okayNav-header__logo navbar-brand" href="#">

                            <img src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" alt="" class="logo-1 img-responsive">

                            <img src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" alt="" style="padding-top:10px" class="logo-2 img-responsive">

                        </a>

                    </div> <!-- End: .col-xs-3 -->

                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-6">

                        <nav role="navigation" class="okayNav pull-right" id="js-navbar-menu">

                            <ul id="navbar-nav" class="navbar-nav">

                                <li><a style="color: #ffc627;" class="btn-nav active" href="#demo">View Demo</a></li>

                                <li><a class="btn-nav" href="#features">Features</a></li>

                                <li><a class="btn-nav" href="#points">Proof Points</a></li>

                            </ul>

                            <img style="margin-top: 20px;margin-left:15px;"src="http://offers.premierinc.com/rs/381-NBB-525/images/contact-button.png" alt="form" class="img-responsive"height="34" width="107">

                        </nav>

                    </div> <!-- End: .col-xs-9 -->

                </div> <!-- End: .row -->

            </div> <!-- End: .container -->

        </header><!-- /header -->

        <!-- End: Navbar Area

        ============================= -->

       

        <!-- Start: Header Section

        ================================ -->

        <section class="header-section-1 bg-image-1 header-js" id="header" >

            <div class="overlay-color">

                <div class="container">

                    <div class="row section-separator">

                        <div style="float:left;" class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">

                            <div class="part-inner">

  <hr class="yellow-line"><br>

                                <!--  Header SubTitle Goes here -->

                                <h1 style="font-weight: 400;"class="title">The fastest way to save money in equipment purchasing.</h1>

                                <div class="detail">

                                    <p style="font-size:28px;">Premier Capital Analytics</p>

                                    <ul class="fa-ul" style="margin:0px">

  <li><i class="fa fa-plus" style="color:#ffc627;margin-right:10px;font-size:22px;"></i>Quick Quote Upload</li>

  <li><i class="fa fa-plus" style="color:#ffc627;margin-right:10px;font-size:22px;"></i>Line Item Details</li>

  <li><i class="fa fa-plus" style="color:#ffc627;margin-right:10px;font-size:22px;"></i>Instant Price Benchmarking</li>

</ul>

                                </div>

                              

                            </div>

                        </div>

                        <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                            <div class="part-inner">

  <img style="margin-top: 25px;"src="http://offers.premierinc.com/rs/381-NBB-525/images/form.jpg" alt="form" class="img-responsive"height="671" width="450">

                              

                              

                              

                            </div>

                        </div> <!-- End: .part-1 -->

                    </div> <!-- End: .row -->

                </div> <!-- End: .container -->

            </div> <!-- End: .overlay-color -->

        </section>

       

        <!-- End: Header Section

        ================================ -->

        <!-- Start: Features Section 7

        ====================================== -->

        <section class="features-section-7 content-half background-light" >

          

         

           

                <div class="row section-separator-blue">

                  <h2 style="text-align: center;display:block;vertical-align: middle;padding-top:25px;padding-bottom: 25px;line-height:1.5;"class="section-heading-blue">Instant price benchmarking for all your capital purchases</h2>

          </div>

        </section>

        <!-- End: Features Section 7

        ================================ -->

        <!-- Start: Features Section 1

        ====================================== -->

        <section class="features-section-1 relative background-semi-dark" id="features">

            <div class="container">

                <div class="row section-separator-2">

                    <!-- Start: Section Header -->

                    <div class="section-header col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

                        <h2 class="section-heading">PremierConnect® Capital Analytics will cut hours off the time it takes you to make confident purchasing decisions</h2>

                       

                    </div>

                    <!-- End: Section Header -->

                    <div class="clearfix"></div>

                    <div class="col-xs-12 features-item">

                        <div class="row">

                           

                            <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                              <div class="inner background-light">

                           

                                    <img style="margin-bottom:40px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/EasyToUse.png" alt="LineItemDetails" height="158" width="158">

                                    <h6 class="title">Easy to use</h6>

                                    <div class="detail">

                                        <p>Upload a quote to start your benchmarking</p>

                                    </div>

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                                <div class="inner background-light">

                           

                                    <img style="margin-bottom:40px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/LineItemDetails.png" alt="LineItemDetails" height="158" width="158">

                                    <h6 class="title">Line Item Details</h6>

                                    <div class="detail">

                                        <p>Full quote breakdown by line item</p>

                                    </div>

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                                <div class="inner background-light">

                           

                                    <img style="margin-bottom:40px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/PriceBenchmarks.png" alt="LineItemDetails" height="158" width="158">

                                    <h6 class="title">Instant Price Benchmarks</h6>

                                    <div class="detail">

                                        <p>Immediate report of

potential savings</p>

                                    </div>

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                         

                        </div>

                    </div>

                </div> <!-- End: .row -->

            </div> <!-- End: .container -->

        </section>

       

        <!-- Start Carousel -->

         <section style="background-color:#fff;" class="features-section-1 relative background-semi-dark" id="features">

           <section class="owl-carousel owl-theme">

  <figure style="text-align:center;"class="owl-item">

  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/tablet.jpg" alt="tablet">

  </figure>

  <figure style="text-align:center;" class="owl-item">

  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/desktop.jpg" alt="desktop">

  </figure>

  <figure style="text-align:center;" class="owl-item">

  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/laptop.jpg" alt="laptop">

  </figure>

  </section>

     

        </section>

        <!-- End Carousel -->

        <!-- Start: Features Section 2

        ====================================== -->

        <section class="features-section-2 relative bg-image-2"id="demo">

            <div class="overlay-color-2">

                <div class="container">

                    <div class="row section-separator-2 light-text">

                        <div class="btn-video m-b-50 text-center">

                            <a href="https://youtu.be/KizaRwJxEy0" class="btn popup-video">

                                <img src="http://offers.premierinc.com/rs/381-NBB-525/images/video.png" alt="Video" class="img-responsive">

                            </a>

                        </div>

                        <div class="clearfix"></div>

                        <!-- Start: Section Header -->

                        <div class="section-header col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

                            <h2 class="section-heading">View The Demo</h2>

                           

                        </div>

                        <!-- End: Section Header -->

                    </div> <!-- End: .row -->

                </div> <!-- End: .container -->

            </div>

        </section>

        <!-- End: Features Section 2

        ======================================-->

     

        <!-- Start: Features Section 6

        ================================== -->

        <section style="background-image: url(http://offers.premierinc.com/rs/381-NBB-525/images/CA_tablet.jpg);background-repeat: no-repeat;background-size:cover;" class="features-section-6 relative background-semi-dark"id="points">

            <div class="container">

                <div class="row section-separator-2">

                    <!-- Start: Section Header -->

                    <div class="section-header col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

                        <h2  class="section-heading">Savings opportunities from our members speak for themselves:</h2>

                       

                    </div>

                    <!-- End: Section Header -->

                    <div class="clearfix"></div>

                    <div class="features-item col-xs-12">

                        <div class="row">

                           

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/100.png" alt="Our Members" class="img-responsive">

                                        <div class="mask">

                                          

                                        </div>

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified savings opportunities.</h6>

                                       

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/200.png" alt="Our Members" class="img-responsive">

                                       

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified by a community hospital system in the southeast in two days.</h6>

                                       

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/63.png" alt="Our Members" class="img-responsive">

                                        <div class="mask">

                                          

                                        </div>

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified by a Mid-Atlantic healthcare organization in a single quote.</h6>

                                       

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/94.png" alt="Our Members" class="img-responsive"height="150" width="150">

                                        <div class="mask">

                                           

                                        </div>

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified by a large, state university health system in two quotes</h6>

                                      

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                        </div>

                    </div> <!-- End: .col-md-8 -->

                </div> <!-- End: .row -->

            </div> <!-- End: .container -->

        </section>

        <!-- End: Features Section 6

        ================================== -->

        <!-- Start: Footer Section 1

        ================================== -->

        <footer class="footer-section background-dark">

           <div id="footer">

<div id="logo"></div>

<div class="social_icons">

<div id="twiterr_icon"></div>

<div id="linkedin_icon"></div>

<div id="insta_icon"></div>

<div id="youtube_icon"></div>

<div id="fb_icon"></div>

</div>

<!-- end social_icons -->

</div>

        </footer>

        <!-- End: Footer Section 1

        ================================== -->

       

        <!-- SCRIPTS

        ========================================-->

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/jquery-1.11.3.js"></script>

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/bootstrap.min.js"></script>

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/plagin.js"></script>

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/index.js"></script>

        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/476573/owl.carousel.min.js'></script>

        <script src="https://use.fontawesome.com/ae5bfffd43.js"></script>

        <!-- Custom Script

        ==========================================-->

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/custom-scripts.js"></script>

       

      

    </body>

</html>

Ok well dig deep, might have to get a bit creative here as I don't really understand that template youre using but it's easy enough to just ignore it and add your own code.

Add the below to the page right at the bottom directly before the closing </html> tag:

<div id="page-overlay">

<div id="lightbox-wrapper">

<div class="lightbox-content">

<p class="close-lightbox"><i class="fa fa-times"></i></p>

<div class="view_video">

<iframe title="YouTube video player" class="youtube-player" type="text/html"

width="640" height="390" src="https://www.youtube.com/embed/KizaRwJxEy0"

frameborder="0" allowFullScreen>

</iframe>

</div>

<!-- end view_video -->

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

<!-- CLOSING HTML TAG -->

</html>

Then replace the code which you currently have:

<a href="https://vimeo.com/45830194" class="btn popup-video">

<img src="images/video.png" alt="Video" class="img-responsive">

</a>

For this code:

<a href="#" class="show_video">

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/video.png" alt="Video" class="img-responsive">

</a>

Add the below jQuery library link and jQuery script plus the css below directly before your closing </head> tag which is near to the top of the page:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

<style>

.video-container {

position:relative;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

#page-overlay{

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.7);

}

#lightbox-wrapper {

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width: 70%;

max-width: 70%;

left: 15%;

}

.lightbox-content {

position: relative;

top: 50%;

transform: translateY(-50%);

background-color: transparent;

text-align: center;

}

.close-lightbox {

text-align: right;

padding: 10px 0 10px 0;

margin: 0;

color: #fff;

}

.view_video {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.view_video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: none;

}

@media only screen and (max-width : 768px) {

#lightbox-wrapper {

width: 90%;

max-width: 90%;

left: 5%;

}

}

</style>

<!-- CLOSING HEAD TAG -->

</head>

That should work.

You can move the css to an external stylesheet to clean the page up once its all working.

Views

1.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Pop up Video link not working with youtube only works with original vimeo example that came with template

Contributor ,
Nov 21, 2017

Copy link to clipboard

Copied

Hi I am working on a template and can't figure why my video wont play in the pop up. Originally it had a Vimeo link which worked but it doesn't with my you tube link. Does anyone have any thoughts?

I'm using marketo to host the page and there are some cache issues. You can view the page through this code. All .js, images and css is hosted through them.

-------------------------------

<!DOCTYPE html>

<html lang="en">

    <head>    

 

        <!-- TITLE OF SITE -->

        <title>StartOn - Landing Page Template</title>

 

        <!-- Meta -->

        <meta charset="utf-8">

        <meta name="description" content="StartUp Landing Page Template" />

        <meta name="keywords" content="Treetoper, startup, landing page, gradient background, image background, video background, template, responsive, bootstrap" />

        <meta name="developer" content="TemplateOcean">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <!-- FAV AND TOUCH ICONS   -->

        <link rel="icon" href="images/favicon.ico">

        <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

        <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">

        <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

        <!-- GOOGLE FONTS -->

        <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,700' rel='stylesheet' type='text/css'>

        <link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600' rel='stylesheet' type='text/css'>

        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">

        <!-- BOOTSTRAP CSS -->

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/bootstrap.min.css">

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/plagin.css">

  <!-- Image Slider -->

       <link rel='stylesheet prefetch' href='http://offers.premierinc.com/rs/381-NBB-525/images/bbdbe3bb781b9424610529ffe.css'>

<link rel='stylesheet prefetch' href='http://offers.premierinc.com/rs/381-NBB-525/images/owl.carousel.css'>

      <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/owlstyle.css">

       

 

        <!--   COUSTOM CSS link  -->

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/newstyle.css">

        <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/newresponsive.css">

       

        <!-- Carousel  -->

      

        <!--[if lt IE 9]>

            <script src="js/plagin-js/html5shiv.js"></script>

            <script src="js/plagin-js/respond.min.js"></script>

        <![endif]-->

       

       <!-- Footer -->

       <style>

  #footer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

background-color: #666666;

padding: 30px 60px;

}

@media screen and (max-width: 768px) {

#footer {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

}

}

.social_icons {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

@media screen and (max-width: 768px) {

.social_icons {

margin: 15px 0 0 0;

}

}

.social_icons div {

margin: 0 0 0 5px;

}

#logo {

width: 216px;

height: 46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);

}

#twiterr_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);

}

#linkedin_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);

}

#insta_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);

}

#youtube_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);

}

#fb_icon {

width: 35px;

height: 35px;

background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);

}</style>

     

<style>

  .fa-ul li {

  font-size: 2rem;

  line-height: 4rem;

  font-weight: 400;

  margin-left:0px;

}</style>

      

    </head>

    <body>

        <!-- Start: Navbar Area

        ============================= -->

        <header id="header" style="background-color: #003b49;" class="okayNav-header navbar-fixed-top main-navbar-top">

            <div class="container">

                <div class="row">

                   

                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">

                        <a class="okayNav-header__logo navbar-brand" href="#">

                            <img src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" alt="" class="logo-1 img-responsive">

                            <img src="http://offers.premierinc.com/rs/381-NBB-525/images/plogo.png" alt="" style="padding-top:10px" class="logo-2 img-responsive">

                        </a>

                    </div> <!-- End: .col-xs-3 -->

                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-6">

                        <nav role="navigation" class="okayNav pull-right" id="js-navbar-menu">

                            <ul id="navbar-nav" class="navbar-nav">

                                <li><a style="color: #ffc627;" class="btn-nav active" href="#demo">View Demo</a></li>

                                <li><a class="btn-nav" href="#features">Features</a></li>

                                <li><a class="btn-nav" href="#points">Proof Points</a></li>

                            </ul>

                            <img style="margin-top: 20px;margin-left:15px;"src="http://offers.premierinc.com/rs/381-NBB-525/images/contact-button.png" alt="form" class="img-responsive"height="34" width="107">

                        </nav>

                    </div> <!-- End: .col-xs-9 -->

                </div> <!-- End: .row -->

            </div> <!-- End: .container -->

        </header><!-- /header -->

        <!-- End: Navbar Area

        ============================= -->

       

        <!-- Start: Header Section

        ================================ -->

        <section class="header-section-1 bg-image-1 header-js" id="header" >

            <div class="overlay-color">

                <div class="container">

                    <div class="row section-separator">

                        <div style="float:left;" class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">

                            <div class="part-inner">

  <hr class="yellow-line"><br>

                                <!--  Header SubTitle Goes here -->

                                <h1 style="font-weight: 400;"class="title">The fastest way to save money in equipment purchasing.</h1>

                                <div class="detail">

                                    <p style="font-size:28px;">Premier Capital Analytics</p>

                                    <ul class="fa-ul" style="margin:0px">

  <li><i class="fa fa-plus" style="color:#ffc627;margin-right:10px;font-size:22px;"></i>Quick Quote Upload</li>

  <li><i class="fa fa-plus" style="color:#ffc627;margin-right:10px;font-size:22px;"></i>Line Item Details</li>

  <li><i class="fa fa-plus" style="color:#ffc627;margin-right:10px;font-size:22px;"></i>Instant Price Benchmarking</li>

</ul>

                                </div>

                              

                            </div>

                        </div>

                        <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                            <div class="part-inner">

  <img style="margin-top: 25px;"src="http://offers.premierinc.com/rs/381-NBB-525/images/form.jpg" alt="form" class="img-responsive"height="671" width="450">

                              

                              

                              

                            </div>

                        </div> <!-- End: .part-1 -->

                    </div> <!-- End: .row -->

                </div> <!-- End: .container -->

            </div> <!-- End: .overlay-color -->

        </section>

       

        <!-- End: Header Section

        ================================ -->

        <!-- Start: Features Section 7

        ====================================== -->

        <section class="features-section-7 content-half background-light" >

          

         

           

                <div class="row section-separator-blue">

                  <h2 style="text-align: center;display:block;vertical-align: middle;padding-top:25px;padding-bottom: 25px;line-height:1.5;"class="section-heading-blue">Instant price benchmarking for all your capital purchases</h2>

          </div>

        </section>

        <!-- End: Features Section 7

        ================================ -->

        <!-- Start: Features Section 1

        ====================================== -->

        <section class="features-section-1 relative background-semi-dark" id="features">

            <div class="container">

                <div class="row section-separator-2">

                    <!-- Start: Section Header -->

                    <div class="section-header col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

                        <h2 class="section-heading">PremierConnect® Capital Analytics will cut hours off the time it takes you to make confident purchasing decisions</h2>

                       

                    </div>

                    <!-- End: Section Header -->

                    <div class="clearfix"></div>

                    <div class="col-xs-12 features-item">

                        <div class="row">

                           

                            <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                              <div class="inner background-light">

                           

                                    <img style="margin-bottom:40px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/EasyToUse.png" alt="LineItemDetails" height="158" width="158">

                                    <h6 class="title">Easy to use</h6>

                                    <div class="detail">

                                        <p>Upload a quote to start your benchmarking</p>

                                    </div>

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                                <div class="inner background-light">

                           

                                    <img style="margin-bottom:40px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/LineItemDetails.png" alt="LineItemDetails" height="158" width="158">

                                    <h6 class="title">Line Item Details</h6>

                                    <div class="detail">

                                        <p>Full quote breakdown by line item</p>

                                    </div>

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features text-center col-md-4 col-sm-6 col-xs-12">

                                <div class="inner background-light">

                           

                                    <img style="margin-bottom:40px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/PriceBenchmarks.png" alt="LineItemDetails" height="158" width="158">

                                    <h6 class="title">Instant Price Benchmarks</h6>

                                    <div class="detail">

                                        <p>Immediate report of

potential savings</p>

                                    </div>

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                         

                        </div>

                    </div>

                </div> <!-- End: .row -->

            </div> <!-- End: .container -->

        </section>

       

        <!-- Start Carousel -->

         <section style="background-color:#fff;" class="features-section-1 relative background-semi-dark" id="features">

           <section class="owl-carousel owl-theme">

  <figure style="text-align:center;"class="owl-item">

  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/tablet.jpg" alt="tablet">

  </figure>

  <figure style="text-align:center;" class="owl-item">

  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/desktop.jpg" alt="desktop">

  </figure>

  <figure style="text-align:center;" class="owl-item">

  <img src="http://offers.premierinc.com/rs/381-NBB-525/images/laptop.jpg" alt="laptop">

  </figure>

  </section>

     

        </section>

        <!-- End Carousel -->

        <!-- Start: Features Section 2

        ====================================== -->

        <section class="features-section-2 relative bg-image-2"id="demo">

            <div class="overlay-color-2">

                <div class="container">

                    <div class="row section-separator-2 light-text">

                        <div class="btn-video m-b-50 text-center">

                            <a href="https://youtu.be/KizaRwJxEy0" class="btn popup-video">

                                <img src="http://offers.premierinc.com/rs/381-NBB-525/images/video.png" alt="Video" class="img-responsive">

                            </a>

                        </div>

                        <div class="clearfix"></div>

                        <!-- Start: Section Header -->

                        <div class="section-header col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

                            <h2 class="section-heading">View The Demo</h2>

                           

                        </div>

                        <!-- End: Section Header -->

                    </div> <!-- End: .row -->

                </div> <!-- End: .container -->

            </div>

        </section>

        <!-- End: Features Section 2

        ======================================-->

     

        <!-- Start: Features Section 6

        ================================== -->

        <section style="background-image: url(http://offers.premierinc.com/rs/381-NBB-525/images/CA_tablet.jpg);background-repeat: no-repeat;background-size:cover;" class="features-section-6 relative background-semi-dark"id="points">

            <div class="container">

                <div class="row section-separator-2">

                    <!-- Start: Section Header -->

                    <div class="section-header col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">

                        <h2  class="section-heading">Savings opportunities from our members speak for themselves:</h2>

                       

                    </div>

                    <!-- End: Section Header -->

                    <div class="clearfix"></div>

                    <div class="features-item col-xs-12">

                        <div class="row">

                           

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/100.png" alt="Our Members" class="img-responsive">

                                        <div class="mask">

                                          

                                        </div>

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified savings opportunities.</h6>

                                       

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/200.png" alt="Our Members" class="img-responsive">

                                       

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified by a community hospital system in the southeast in two days.</h6>

                                       

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/63.png" alt="Our Members" class="img-responsive">

                                        <div class="mask">

                                          

                                        </div>

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified by a Mid-Atlantic healthcare organization in a single quote.</h6>

                                       

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                            <div class="each-features col-md-3 col-sm-6 col-xs-12">

                                <div class="inner background-light text-center">

                                    <div class="features-hover">

                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/94.png" alt="Our Members" class="img-responsive"height="150" width="150">

                                        <div class="mask">

                                           

                                        </div>

                                    </div>

                                    <div class="clearfix"></div>

                                    <div class="detail">

                                        <h6 class="name">Identified by a large, state university health system in two quotes</h6>

                                      

                                    </div>

                                       

                                </div> <!-- End: .inner -->

                            </div> <!-- End: .each-features -->

                        </div>

                    </div> <!-- End: .col-md-8 -->

                </div> <!-- End: .row -->

            </div> <!-- End: .container -->

        </section>

        <!-- End: Features Section 6

        ================================== -->

        <!-- Start: Footer Section 1

        ================================== -->

        <footer class="footer-section background-dark">

           <div id="footer">

<div id="logo"></div>

<div class="social_icons">

<div id="twiterr_icon"></div>

<div id="linkedin_icon"></div>

<div id="insta_icon"></div>

<div id="youtube_icon"></div>

<div id="fb_icon"></div>

</div>

<!-- end social_icons -->

</div>

        </footer>

        <!-- End: Footer Section 1

        ================================== -->

       

        <!-- SCRIPTS

        ========================================-->

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/jquery-1.11.3.js"></script>

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/bootstrap.min.js"></script>

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/plagin.js"></script>

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/index.js"></script>

        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/476573/owl.carousel.min.js'></script>

        <script src="https://use.fontawesome.com/ae5bfffd43.js"></script>

        <!-- Custom Script

        ==========================================-->

        <script src="http://offers.premierinc.com/rs/381-NBB-525/images/custom-scripts.js"></script>

       

      

    </body>

</html>

Ok well dig deep, might have to get a bit creative here as I don't really understand that template youre using but it's easy enough to just ignore it and add your own code.

Add the below to the page right at the bottom directly before the closing </html> tag:

<div id="page-overlay">

<div id="lightbox-wrapper">

<div class="lightbox-content">

<p class="close-lightbox"><i class="fa fa-times"></i></p>

<div class="view_video">

<iframe title="YouTube video player" class="youtube-player" type="text/html"

width="640" height="390" src="https://www.youtube.com/embed/KizaRwJxEy0"

frameborder="0" allowFullScreen>

</iframe>

</div>

<!-- end view_video -->

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

<!-- CLOSING HTML TAG -->

</html>

Then replace the code which you currently have:

<a href="https://vimeo.com/45830194" class="btn popup-video">

<img src="images/video.png" alt="Video" class="img-responsive">

</a>

For this code:

<a href="#" class="show_video">

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/video.png" alt="Video" class="img-responsive">

</a>

Add the below jQuery library link and jQuery script plus the css below directly before your closing </head> tag which is near to the top of the page:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

<style>

.video-container {

position:relative;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

#page-overlay{

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.7);

}

#lightbox-wrapper {

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width: 70%;

max-width: 70%;

left: 15%;

}

.lightbox-content {

position: relative;

top: 50%;

transform: translateY(-50%);

background-color: transparent;

text-align: center;

}

.close-lightbox {

text-align: right;

padding: 10px 0 10px 0;

margin: 0;

color: #fff;

}

.view_video {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.view_video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: none;

}

@media only screen and (max-width : 768px) {

#lightbox-wrapper {

width: 90%;

max-width: 90%;

left: 5%;

}

}

</style>

<!-- CLOSING HEAD TAG -->

</head>

That should work.

You can move the css to an external stylesheet to clean the page up once its all working.

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 21, 2017 0
LEGEND ,
Nov 21, 2017

Copy link to clipboard

Copied

kineticcreative123  wrote

Hi I am working on a template and can't figure why my video wont play in the pop up. Originally it had a Vimeo link which worked but it doesn't with my you tube link. Does anyone have any thoughts?

I'm using marketo to host the page and there are some cache issues. You can view the page through this code. All .js, images and css is hosted through them.

You'll probably need to use an iframe to embed a youtube video. I cant really see what is going on by looking at the code you posted. Its best to upload a page and say where you want/expected the video to appear.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2017 0
Contributor ,
Nov 21, 2017

Copy link to clipboard

Copied

OK. I just got Marketo to host the page right. Below is a link. I replaced what they had with the youtube url.

This was the original code link for the video:

<div class="btn-video m-b-50 text-center">

                            <a href="https://vimeo.com/45830194" class="btn popup-video">

                                <img src="images/video.png" alt="Video" class="img-responsive">

                            </a>

                        </div>

Here is the landing page.

starton - landing page template

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2017 0
LEGEND ,
Nov 21, 2017

Copy link to clipboard

Copied

Ok well dig deep, might have to get a bit creative here as I don't really understand that template youre using but it's easy enough to just ignore it and add your own code.

Add the below to the page right at the bottom directly before the closing </html> tag:

<div id="page-overlay">

<div id="lightbox-wrapper">

<div class="lightbox-content">

<p class="close-lightbox"><i class="fa fa-times"></i></p>

<div class="view_video">

<iframe title="YouTube video player" class="youtube-player" type="text/html"

width="640" height="390" src="https://www.youtube.com/embed/KizaRwJxEy0"

frameborder="0" allowFullScreen>

</iframe>

</div>

<!-- end view_video -->

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

<!-- CLOSING HTML TAG -->

</html>

Then replace the code which you currently have:

<a href="https://vimeo.com/45830194" class="btn popup-video">

<img src="images/video.png" alt="Video" class="img-responsive">

</a>

For this code:

<a href="#" class="show_video">

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/video.png" alt="Video" class="img-responsive">

</a>

Add the below jQuery library link and jQuery script plus the css below directly before your closing </head> tag which is near to the top of the page:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

<style>

.video-container {

position:relative;

padding-bottom:56.25%;

padding-top:30px;

height:0;

overflow:hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

#page-overlay{

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.7);

}

#lightbox-wrapper {

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width: 70%;

max-width: 70%;

left: 15%;

}

.lightbox-content {

position: relative;

top: 50%;

transform: translateY(-50%);

background-color: transparent;

text-align: center;

}

.close-lightbox {

text-align: right;

padding: 10px 0 10px 0;

margin: 0;

color: #fff;

}

.view_video {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.view_video iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: none;

}

@media only screen and (max-width : 768px) {

#lightbox-wrapper {

width: 90%;

max-width: 90%;

left: 5%;

}

}

</style>

<!-- CLOSING HEAD TAG -->

</head>

That should work.

You can move the css to an external stylesheet to clean the page up once its all working.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2017 0
Adobe Community Professional ,
Nov 21, 2017

Copy link to clipboard

Copied

Rather than the link to the video that you have used, try


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

BenPleysier  wrote

Rather than the link to the video that you have used, try

I don't think that will work but well spotted, I didn't even notice the currect youtube link was mal-formatted. I just grabbed the end bit and hooked it onto the standard youtube embed link

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Contributor ,
Nov 22, 2017

Copy link to clipboard

Copied

Thanks Ben,

The revised link didn't work. I don't believe I've seen a youtube video link formatted that way but it does take you to the video. Nice catch.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

kineticcreative123  wrote

Thanks Ben,

The revised link didn't work. I don't believe I've seen a youtube video link formatted that way but it does take you to the video. Nice catch.

I didnt suggest that link Ben did, we are 2 different people.

The only way I can get it to work is by introducing some independent coding. I suspect in amongst one of those linked  js files there is some coding which takes the url from the link and spits it back out to the page in a modal window. The perils of using code someone else has written and is not around to ask questions about it or to suggest solutions....

This is why I continue to suggest one should be cautious when deciding to deploy templates, extensions, plugins etc because unless you adhere to what they want you to do it could leave you in a sinking canoe without a paddle...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Contributor ,
Nov 22, 2017

Copy link to clipboard

Copied

Hi osgood!

Thanks again. Excellent work. Works like a charm. Would you happen to know how i can get it to stop playing when you close the video out? The video drops out but the sound still plays.

Looks awesome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

kineticcreative123  wrote

Hi osgood!

Thanks again. Excellent work. Works like a charm. Would you happen to know how i can get it to stop playing when you close the video out? The video drops out but the sound still plays.

Looks awesome.

Not off-hand but I'll give it some thought later on. I've got to dash out for a couple of hours....

I'm wondering if I write the video to the <div> instead of it already being in the <div> on pageload would work or maybe remove it from the <div> on close.........hummm.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
LEGEND ,
Nov 22, 2017

Copy link to clipboard

Copied

kineticcreative123  wrote

Hi osgood!

Thanks again. Excellent work. Works like a charm. Would you happen to know how i can get it to stop playing when you close the video out? The video drops out but the sound still plays.

Looks awesome.

Yes, thats it

Remove the iframe code from the html code you inserted at the bottom of your page:

<iframe title="YouTube video player" class="youtube-player" type="text/html"

width="640" height="390" src="https://www.youtube.com/embed/KizaRwJxEy0"

frameborder="0" allowFullScreen>

</iframe>

So it looks like below without the iframe code:

<div id="page-overlay">

<div id="lightbox-wrapper">

<div class="lightbox-content">

<p class="close-lightbox"><i class="fa fa-times"></i></p>

<div class="view_video">

</div>

<!-- end view_video -->

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

Then replace the current jQuery code for the new jQuery code below, which adds the video to the 'view_video' <div> onclick and when you click the x to close the modal window it removes the iframe, hence the video sound stops....

<script>

$(document).ready(function() {

$('#page-overlay, #lightbox-wrapper').hide();

$('.show_video').click(function(){

$('.view_video').html("<iframe  width='640' height='390' src='https://www.youtube.com/embed/KizaRwJxEy0' frameborder='0' allowFullScreen>" + "</iframe>");

$('#page-overlay, #lightbox-wrapper').fadeIn();

});

$('.close-lightbox').css('cursor','pointer').click(function() {

$('.view_video').html('');

$('#page-overlay, #lightbox-wrapper').fadeOut();

});

});

</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Contributor ,
Nov 22, 2017

Copy link to clipboard

Copied

Ahh! Perfect thank you! I starting to grasp this a lot better with all the help. I've also been trying to get the previous and next buttons to be side arrows and get rid of the buttons. I was thinking of maybe using font awesome?  

This is the css. Some of it is not used because i deleted the captions.

.wrap {

  max-width: rem(800);

  text-align: center;

} // .wrap

// Owl Carousel Theme

.owl-theme {

  color: $color-white;

  figure {

  line-height: 0;

  margin: 0;

  position: relative;

  } // figure

  figcaption {

  background: rgba($color-black, 1);

  font-size: rem(14);

  line-height: 1.33;

  padding: rem(10) rem(20);

  text-align: left;

  z-index: 10;

  @include media($phone-landscape) {

  background: rgba($color-black, 0.8);

  bottom: 0;

  font-size: rem(16);

  left: 0;

  padding: rem(20) rem(40);

  right: 0;

  position: absolute;

  }

  } // figcaption

} // .owl-theme

.owl-controls {

  margin-top: rem(10);

  text-align: center;

  // Styling Next and Prev buttons

  .owl-buttons {

  div {

  @include position(absolute, 50% null null null);

  background: $color-blue;

  color: $color-white;

  display: inline-block;

  margin-top: rem(-12);

  opacity: 0.8;

  padding: rem(3) rem(10);

  zoom: 1;

  &:after {

  @include size(rem(48) rem(48));

  background-size: cover;

  content: '';

  display: inline-block;

  }

  } // div

  span {

  @extend .screen-reader-text !optional;

  } // span

  .owl-prev {

  left: 0;

  &:after {

  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/476573/keyboard_arrow_left.svg') center center no-repeat;

  }

  } // .owl-prev

  .owl-next {

  right: 0;

  &:after {

  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/476573/keyboard_arrow_right.svg') center center no-repeat;

  }

  } // .owl-next

  } // .owl-buttons

  // Styling Pagination

  .owl-page {

  display: inline-block;

  *display: inline; /*IE7 life-saver */

  zoom: 1;

  span {

  @include size(rem(12) rem(12));

  background: $color-blue;

  border-radius: 50%;

  display: block;

  filter: Alpha(Opacity=70); /*IE7 fix*/

  margin: rem(5) rem(7);

  opacity: 0.7;

  // If PaginationNumbers is true

  &.owl-numbers {

  @include size(auto auto);

  border-radius: rem(30);

  color: $color-white;

  font-size: rem(12);

  padding: rem(2) rem(10);

  } // span.owl-numbers

  } // span

  &.active span {

  filter: Alpha(Opacity=100); /*IE7 fix*/

  opacity: 1;

  }

  } // .owl-page

  // Clickable class fix problem with hover on touch devices

  // Use it for non-touch hover action

  &.clickable {

  .owl-buttons {

  div:hover {

  filter: Alpha(Opacity=100); /*IE7 fix*/

  opacity: 1;

  text-decoration: none;

  }

  } // .owl-buttons

  .owl-page:hover span {

  filter: Alpha(Opacity=100); /*IE7 fix*/

  opacity: 1;

  }

  } // .owl-controls.clickable

} // .owl-controls

// each image

.owl-item {

  // preloading images

  &.loading {

  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/476573/AjaxLoader.gif) no-repeat center center;

  min-height: rem(150);

  }

} // .owl-item

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0