You can use mainClass option to add custom class to main containers:
$('.some-link').magnificPopup({
// ...
mainClass: 'my-custom-class',
});
Then you can style this particular popup:
.mfp-wrap.my-custom-class .mfp-content {
height: 800px;
max-height: 90vh;
width: 800px;
max-width: 90vw;
}
In this way you can use different dimensions for different popups - just use different mainClass and separate styles.
You can use mainClass option to add custom class to main containers:
$('.some-link').magnificPopup({
// ...
mainClass: 'my-custom-class',
});
Then you can style this particular popup:
.mfp-wrap.my-custom-class .mfp-content {
height: 800px;
max-height: 90vh;
width: 800px;
max-width: 90vw;
}
In this way you can use different dimensions for different popups - just use different mainClass and separate styles.
Try this one, and check if it would update.
.mfp-content {
width:300px;
height:300px;
}
Magnific-Popup not working if used in embedded iframe
How can style popup iframe in Magnific Pop-Up? - Stack Overflow
[Magnific Popup] How to make iframe scrolling to yes? | OutSystems
Changing the properties of Iframe that is opened with magnific popup – Okler Themes
So I'm still relatively green to coding, and for my first professional assignment, my manager wants me to display an iframe in a lightbox/popup. I've decided to try and use either Magnific-popup or Lightbox2, whichever works really.
Magnific-popup has a section on how to load iframes, but I don't understand what it's trying to get me to do. I added the stylesheet and js files included in the Magnific-popup build tool to the javascript and stylesheet sections of the page builder I'm using, but I'm getting confused on how to initialize the code. When I try to click on the link on my webpage, nothing happens.
When it says that popup initialization should be executed after document ready, where does that imply I put this jQuery?
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});Additionally, there are examples on how to change Magnify-popup to accept any domain for iframes, but they seem to all have the fact that they are video players in common. I'm not trying to play a video, it's just a form built in WordPress that is being access through an iframe.
Sorry if this question is really vague, I'm just feeling really lost and I don't know how to even begin approaching this problem. What am I supposed to do after adding the JS and CSS to my page to set up a lightbox/popup to display an iframe?
This isn't a complete answer but it might help.
Change your options to something like this:
$('.iframe-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler your-special-css-class">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen> </iframe>'+
'</div>'
}
});
Then in you css Class do something like this:
.your-special-css-class {
max-width: 320px !important;
height: 85%;
margin: auto;
max-height: 780px;
padding: 140% 16px 0 13px !important;
}
the important part to adjust the height is the padding....
$(document).ready(function() {
$('.open-popup-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<style>.mfp-iframe-holder .mfp-content {max-width: 900px;height:500px}</style>'+
'<div class="mfp-iframe-scaler" >'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div></div>'
}
});
});
Here is a simple solution I've used for this:
$('.image-link, .video-link').magnificPopup({
callbacks: {
elementParse: function(item) {
// the class name
if(item.el.context.className == 'video-link') {
item.type = 'iframe';
} else {
item.type = 'image';
}
}
},
gallery:{enabled:true},
type: 'image',
});
It should work with type formatters.
You are able to define the type ofa gallery item using the mfp-TYPE CSS class. So in this case you would add mfp-iframe to the anchor tag pointing to your video and the plugin will handle the rest.
HTML:
<div class="gallery">
<!-- Image -->
<a href="https://www.example.com/image-fullsize-1.jpg">
<img src="https://www.example.com/image-thumbnail-1.jpg" alt="">
</a>
<!-- Video item with mfp-iframe class -->
<a href="https://www.example.com/video-url" class="mfp-iframe">
<img src="https://www.example.com/video-thumbnail.jpg" alt="">
</a>
<!-- Image -->
<a href="https://www.example.com/image-fullsize-2.jpg">
<img src="https://www.example.com/image-thumbnail-2.jpg" alt="">
</a>
<!-- Image -->
<a href="https://www.example.com/image-fullsize-3.jpg">
<img src="https://www.example.com/image-thumbnail-3.jpg" alt="">
</a>
</div>
JS:
$('.gallery').magnificPopup(
{
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return '';
}
}
}
);
More information can be found in the documentation:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types
You can use: https://github.com/davidjbradshaw/iframe-resizer
This requires that you add a script to the page loading the <iframe>:
<script type="text/javascript" src="../iframeResizer.min.js"></script>
As well as to the external page you are trying to load Inside of the <iframe>:
<script type="text/javascript" src="../iframeResizer.contentWindow.min.js"></script>
Note: If you are trying to load an external domain which isn't yours, this may not work for you - because you must have a script added in both places (sorry), but this WILL work if you are trying to load an HTTPS page inside a NON HTTPS page.
I also define my own markup for the magnific popup in the script.
$(document).ready(function() {
$('.open-popup').magnificPopup({
items: {src: '/file.html'},
type: 'iframe',
iframe: {
markup: '<div class="iframe-popup">'+
'<iframe class="mfp-iframe" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>'+
'<div class="mfp-close"></div>'+
'</div>'
},
});
});
You can resize the width of the iframe pretty easily with CSS to 100% of the parent window... as long as you have a max-width set on your parent (.iframe-popup in the example above).
One major thing I figured out that magnific actually has a resize callback included in its code:
callbacks: {
resize: function() {
$('iframe').iFrameResize([{
enablePublicMethods: true,
checkOrigin: false
}]);
}
That's it. Works for me every time.
Since there doesn't seem to be a built in solution for auto resizing (non-video) iframes in Magnific Popup I built my own solution using external plugins as mentioned above.
To check if the iframe content height has changed I used this Fork of jQuery resize event plugin, which is compatible with the current jQuery version 1.11.1.
To send the new height from iframe to parent window (cross domain compatible) I ended up using this jQuery postMessage Plugin, which seems to be well maintained and works in IE6+.
Also I switched to use "type: inline" of Magnific Popup to display the iframes, since "type: iframe" seems to be specificaly styled for iframe video embedding like YouTube videos, which made it hard for me to style the popup height in a simple way.
There might be a cleaner/straight forward solution, that's why I didn't get into too much details. Another reason is that I used quite a few lines of code for implementation into MFP and since I'm new to JS it might not be the best code ;) But since there was no answer yet I will mark this as accepted answer for now because it works.
Best solution of course would be if Magnific Popup would have a built in solution (feature request!).
Copy $(document).ready(function(){
$('.popup-youtube, .popup-vimeo').magnificPopup({
// disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
iframe:{
patterns:{
youtube:{
index: 'youtube.com',
id: 'v=',
src: 'https://www.youtube.com/embed/%id%'
},
},
srcAction:'iframe_src',
},
fixedContentPos: false
});
});
Declared src for iframe and it worked.
If you want the video in a popup/another window try this
Copy<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
please note the movement of all script tags to under the head, the updated URL, and the removal of
Copy <script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
if you want it embedded within the page (as an iframe) try:
Copy<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.popup').magnificPopup({
type:"iframe",
})
})
</script>
</head>
<body>
<iframe width="420" height="315" class= "popup" scr= "https://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1">play</iframe>
</body>
</html>
also reference this site, w3 schools, (here)
also try it out here (option 1), RIGHT CLICK on the link in STACK OVERFLOWS ENGINE in any other you can just click on it but stack overflow requires you to right click and say "open in new tab"
Copy<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<base target="_top">
<meta charset="utf-8">
<title>popup</title>
<link rel="stylesheet" href="magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.magnific-popup.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
</body>
</html>
Run code snippetEdit code snippet Hide Results Copy to answer Expand