Using ProductCart - PC v5.2.10 Bootstrap with iframe

Print Page | Close Window

PC v5.2.10 Bootstrap with iframe

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Using ProductCart
Forum Description: Running your store with ProductCart
URL: https://forum.productcart.com/forum_posts.asp?TID=6139
Printed Date: 23-November-2024 at 9:17pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: PC v5.2.10 Bootstrap with iframe

Posted By: MGatESS
Subject: PC v5.2.10 Bootstrap with iframe
Date Posted: 15-August-2018 at 3:09pm

Wanted to embed a YouTube video on a Content Page running under the Bootstrap Blue theme. I have been able to use the "responsive" classes for images, but I don't know how to get the responsive class for an iFrame. I don't think that ProductCart's Bootstrap is high enough to use what's on the bootstrap website.

Does anyone know if you can make an iFrame, or a way to embed a YouTube video, to make it auto-resize (be "responsive") utilizing the Bootstrap Blue theme?

-------------
~ Mark G.

ESS, Inc. - http://www.endoscopy.com/" rel="nofollow - www.endoscopy.com

Replies:

Posted By: MFoster
Date Posted: 15-August-2018 at 3:49pm

From ProdocutCart's developers:

The theme uses Bootstrap 3.1, but you can also add styles from v3.2

.embed-responsive {

position: relative;

display: block;

height: 0;

padding: 0;

overflow: hidden;

}

.embed-responsive .embed-responsive-item,

.embed-responsive iframe,

.embed-responsive embed,

.embed-responsive object,

.embed-responsive video {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

border: 0;

}

.embed-responsive-16by9 {

padding-bottom: 56.25%;

}

.embed-responsive-4by3 {

padding-bottom: 75%;

}

And for the video:

</div>

Basically you always want to wrap the iframe with a div relatively positioned. Then position the iframe absolutely. The 2 classes mentioned at the bottom of the css are for aspect ratios.

There's also a js plugin…

http://davidjbradshaw.github.io/iframe-resizer/ " rel="nofollow - http://davidjbradshaw.github.io/iframe-resizer/ ;

but it requires more effort.

Posted By: Kevin Cook
Date Posted: 15-August-2018 at 3:54pm

You can set the width & height to 100% on the iframe. It will size to the containing div. So if the containing div is responsive, the iframe should be also.