PC v5.2.10 Bootstrap with iframe

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   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?

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
MGatESS Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 12-July-2006 Location: United States Status: Offline Points: 73	Post Options Post Reply Quote MGatESS Report Post Thanks(0) Quote Reply 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

MFoster Members Profile Send Private Message Find Members Posts Add to Buddy List Admin Group Joined: 28-November-2008 Location: Ocala, Florida Status: Offline Points: 8	Post Options Post Reply Quote MFoster Report Post Thanks(1) Quote Reply 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… http://davidjbradshaw.github.io/iframe-resizer/ ; but it requires more effort.

Kevin Cook Members Profile Send Private Message Find Members Posts Add to Buddy List Admin Group Joined: 15-June-2018 Status: Offline Points: 4	Post Options Post Reply Quote Kevin Cook Report Post Thanks(0) Quote Reply 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.