Inspiring

Answered

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

Forum|Forum|8 years ago
November 21, 2017
1 reply
3668 views

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>

<head>

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

<!--[if lt IE 9]>

<![endif]-->

<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

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

</a>

</div>

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

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

</ul>

</nav>

</div>

</div>

</div>

</header>

<!-- End: Navbar Area

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

<!-- Start: Header Section

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

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

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

<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>

</div>

</div>

</section>

<!-- End: Header Section

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

<!-- Start: Features Section 7

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

<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

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

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

</div>

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

</div>

</div>

</div>

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

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

</div>

</div>

</div>

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

<p>Immediate report of

potential savings</p>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</figure>

</figure>

</figure>

</section>

<!-- Start: Features Section 2

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

</a>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- End: Features Section 2

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

<!-- Start: Features Section 6

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

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

</div>

</div>

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

</div>

</div>

</div>

</div>

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

</div>

</div>

</div>

</div>

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

</div>

</div>

</div>

</div>

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

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<!-- End: Features Section 6

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

<!-- Start: Footer Section 1

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

</div>

</div>

</footer>

<!-- End: Footer Section 1

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

<!-- SCRIPTS

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

<!-- Custom Script

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

</body>

</html>

This topic has been closed for replies.

Correct answer osgood_

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:

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

frameborder="0" allowFullScreen>

</iframe>

</div>

</div>

</div>

</div>

</html>

Then replace the code which you currently have:

</a>

For this code:

</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:

$(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>

</head>

That should work.

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

O

osgood_

Legend

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.

kineticcreative123Author

Inspiring

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:

</a>

</div>

Here is the landing page.

starton - landing page template

O

osgood_Correct answer

Legend

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:

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

frameborder="0" allowFullScreen>

</iframe>

</div>

</div>

</div>

</div>

</html>

Then replace the code which you currently have:

</a>

For this code:

</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:

$(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>

</head>

That should work.

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded