#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icon
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working?
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Apps
- How do I need to configure PhoneGap/Cordova?

Back to Popups

# iframes in popups

You may need to embed an iframe into a popup to use a 3rd party widget. Here, we'll walk through a few real-world examples of working with iframes: videos and maps.

## Video example

Here is an example of a 3rd party video player embedded in a popup:

Launch video player

The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class `ui-content` and a one pixel border because the framework will add class `ui-body-d` to the popup.

    <div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">

        <iframe src="http://player.vimeo.com/video/41135183" width="497" height="298" seamless></iframe>

    </div>

When using an iframe inside a popup it is important to initially set the width and height attributes to 0. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use `attr()` to set the zero values upon the `pageinit` event.

Next, bind to the `popupbeforeposition` event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function `scale()` is used to scale down the iframe to fit smaller screens. Expand the section below to view the code of this function.

### `scale()`

The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account.

    function scale( width, height, padding, border ) {
        var scrWidth = $( window ).width() - 30,
            scrHeight = $( window ).height() - 30,
            ifrPadding = 2 * padding,
            ifrBorder = 2 * border,
            ifrWidth = width + ifrPadding + ifrBorder,
            ifrHeight = height + ifrPadding + ifrBorder,
            h, w;

        if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
            w = ifrWidth;
            h = ifrHeight;
        } else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
            w = scrWidth;
            h = ( scrWidth / ifrWidth ) * ifrHeight;
        } else {
            h = scrHeight;
            w = ( scrHeight / ifrHeight ) * ifrWidth;
        }

        return {
            'width': w - ( ifrPadding + ifrBorder ),
            'height': h - ( ifrPadding + ifrBorder )
        };
    };

Note: This function is not part of the framework. Copy the code into your script to use it.

When the popup is closed the width and height should be set back to 0. You can do this by binding to the `popupafterclose` event.

This is the complete script and the link to open the video popup:

    $( document ).on( "pageinit", function() {
        $( "#popupVideo iframe" )
            .attr( "width", 0 )
            .attr( "height", 0 );

        $( "#popupVideo" ).on({
            popupbeforeposition: function() {
                var size = scale( 497, 298, 15, 1 ),
                    w = size.width,
                    h = size.height;

                $( "#popupVideo iframe" )
                    .attr( "width", w )
                    .attr( "height", h );
            },
            popupafterclose: function() {
                $( "#popupVideo iframe" )
                    .attr( "width", 0 )
                    .attr( "height", 0 );
            }
        });
    });

Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the `popupafterclose` event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled.

## Map example

In the second example, an iframe is used to display Google Maps API. Using an iframe prevents issues with the controls of the map.

Open Map
Close

This is the markup of the popup including a right close button:

    <div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" data-corners="false" data-tolerance="15,15">

        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

        <iframe src="map.html" width="480" height="320" seamless></iframe>

    </div>

Expand the section below to view the source of the iframe.

### `map.html`

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <script>
            function initialize() {
                var myLatlng = new google.maps.LatLng( 51.520838, -0.140261 );
                var myOptions = {
                    zoom: 15,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
            }
        </script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <style>
            html {
                height: 100%;
                overflow: hidden;
            }
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #map_canvas {
                height: 100%;
            }
        </style>
    </head>
    <body onload="initialize()">

        <div id="map_canvas"></div>

    </body>
    </html>

Setting the size of the iframe is done exactly the same as for the video example, with one exception. You should also set the width and height of the div that contains the map to prevent the page to break on platforms like Android 2.3. In this example the ID of this div is `#map_canvas`.

This is the complete script and the link to open the map popup:

    $( document ).on( "pageinit", function() {
        $( "#popupMap iframe" )
            .attr( "width", 0 )
            .attr( "height", 0 );

        $( "#popupMap iframe" ).contents().find( "#map_canvas" )
            .css( { "width" : 0, "height" : 0 } );

        $( "#popupMap" ).on({
            popupbeforeposition: function() {
                var size = scale( 480, 320, 0, 1 ),
                    w = size.width,
                    h = size.height;

                $( "#popupMap iframe" )
                    .attr( "width", w )
                    .attr( "height", h );

                $( "#popupMap iframe" ).contents().find( "#map_canvas" )
                    .css( { "width": w, "height" : h } );
            },
            popupafterclose: function() {
                $( "#popupMap iframe" )
                    .attr( "width", 0 )
                    .attr( "height", 0 );

                $( "#popupMap iframe" ).contents().find( "#map_canvas" )
                    .css( { "width": 0, "height" : 0 } );
            }
        });
    });