How to resize magnific pop up light box

sicnarf033Sep 16, 2016

Hello,

I am looking to resize the light box but I am not sure how to do so. I have iframes with video content that vary in sizes. Right now the lightbox is at a widescreen ratio but I want it to look more of a fullscreen ratio.

I have videos that are 640x480, 700x600, and 640x540. It would be nice to get them to resize the iframe depending on the content.

Here is the html section:

<section id="section-work" class="page-section topmargin-lg">

					<div class="section dark parallax nobottommargin" style="background:url('images/parallax/background.jpg') center center;" data-stellar-background-ratio="0.3">

						<div class="heading-block center">
							<h2>Our Work</h2>
							<span></span>
						</div>

						<div class="container clearfix center">

							<!-- Portfolio Items
							============================================= -->
							<div id="portfolio" class="portfolio grid-container portfolio-nomargin clearfix">

								<article class="portfolio-item pf-advisor pf-demos">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/blank_logo.png" alt="#">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/vsp/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>BLANK</h3>
										<span>Advisor Experience</span>
									</div>
								</article>

								<article class="portfolio-item pf-case-studies">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/backroads_logo.png" alt="Backroads">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/backroads-advisor/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Backroads Active Travel</h3>
										<span>Advisor Experience</span>
									</div>
								</article>

								<article class="portfolio-item pf-vision pf-demos">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/inspirent_logo.png" alt="Inspirent">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/inspirent/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Inspirent Motors</h3>
										<span>Vision Variable Video</span>
									</div>
								</article>

								<article class="portfolio-item pf-advisor pf-demos">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/la_quinta_logo.png" alt="La Quinta">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/laquinta/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>La Quinta</h3>
										<span>Advisor Experience</span>
									</div>
								</article>

								<article class="portfolio-item pf-vision pf-demos">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/bransons_logo.png" alt="Branson's Outlet">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/bransons/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Branson's Outlet</h3>
										<span>Vision Variable Video</span>
									</div>
								</article>

								<article class="portfolio-item pf-advisor pf-demos">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/westcott_logo.png" alt="Westcott">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/westcott/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Westcott</h3>
										<span>Advisor Walkthrough</span>
									</div>
								</article>

								<article class="portfolio-item pf-advisor">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/sears_logo.png" alt="Sears">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/sears/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Sears</h3>
										<span>Advisor Experience</span>
									</div>
								</article>

								<article class="portfolio-item pf-advisor pf-demos">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/fairseas_logo.png" alt="Fair Seas">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/fairseas/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Fair Seas</h3>
										<span>Advisor Walkthrough</span>
									</div>
								</article>

							</div><!-- #portfolio end -->

						</div>

						<div class="divider divider-short divider-center topmargin-lg"><i class="icon-circle"></i></div>

						<div class="heading-block center">
							<h2>Case Studies</h2>
							<span></span>
						</div>

						<div class="container clearfix center">

							<!-- Portfolio Items
							============================================= -->
							<div id="portfolio" class="portfolio grid-container portfolio-nomargin clearfix">

								<article class="portfolio-item pf-case-studies">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/blank_logo.png" alt="Backroads">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/vsp" class="center-icon" target="_blank"><i class="icon-line-ellipsis"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>BLANK</h3>
									</div>
								</article>

								<article class="portfolio-item pf-case-studies">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/backroads_logo.png" alt="Backroads">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/backroads/" class="left-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
											<a href="http://marketing.nimblefish.com/backroads-case-study" class="right-icon" target="_blank"><i class="icon-line-ellipsis"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Backroads Active Travel</h3>
									</div>
								</article>

								<article class="portfolio-item pf-case-studies">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/carnival_logo.png" alt="Backroads">
										</a>
										<div class="portfolio-overlay">
											<a href="http://marketing.nimblefish.com/carnival-case-study" class="center-icon" target="_blank"><i class="icon-line-ellipsis"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>Carnival Cruises</h3>
									</div>
								</article>

								<article class="portfolio-item pf-case-studies">
									<div class="portfolio-image">
										<a href="#">
											<img src="images/portfolio/att_logo.png" alt="AT&T">
										</a>
										<div class="portfolio-overlay">
											<a href="videos/att/" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a>
										</div>
									</div>
									<div class="portfolio-desc">
										<h3>AT&T</h3>
									</div>
								</article>

							</div>

						</div>

					</div>

				</section>

SemiColonWebSTAFFSep 19, 2016

Hello,

Resizing the iFrame according to the Video Sizes is Currently not supported since iFrames have a Fixed size and at this moment it is not possible to resize the iFrames pro-grammatically. But this is Definitely Possible using an Inline Modal Type: http://themes.semicolonweb.com/html/canvas/lightbox.php as you can easily adjust the Modal Size according to your needs. You will also need to Embed your Videos directly inside the Page to use the Inline Modal Types. Do let us know if yu want an Implementation Example or a Sample Code.

Hope this Helps. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.