ProductCart E-Commerce Solutions Homepage
Forum Home Forum Home > ProductCart > Using ProductCart
  New Posts New Posts RSS Feed - PC v5.2.10 Bootstrap with iframe
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

PC v5.2.10 Bootstrap with iframe

 Post Reply Post Reply
Author
Message
MGatESS View Drop Down
Groupie
Groupie
Avatar

Joined: 12-July-2006
Location: United States
Status: Offline
Points: 73
Post Options Post Options   Thanks (0) Thanks(0)   Quote MGatESS Quote  Post ReplyReply Direct Link To This Post Topic: PC v5.2.10 Bootstrap with iframe
    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. - www.endoscopy.com
Back to Top
MFoster View Drop Down
Admin Group
Admin Group
Avatar

Joined: 28-November-2008
Location: Ocala, Florida
Status: Offline
Points: 8
Post Options Post Options   Thanks (1) Thanks(1)   Quote MFoster Quote  Post ReplyReply Direct Link To This Post 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 class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</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… 


but it requires more effort. 

Back to Top
Kevin Cook View Drop Down
Admin Group
Admin Group


Joined: 15-June-2018
Status: Offline
Points: 4
Post Options Post Options   Thanks (0) Thanks(0)   Quote Kevin Cook Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.078 seconds.