jQuery Mobile - video iframe

Descripción

Puede especificar un marco en línea que incrusta un documento dentro de otro documento, como el contenido de otra fuente, un anuncio, etc.

Ejemplo

El siguiente ejemplo demuestra el uso de video iframe en jQuery Mobile Framework.

<!DOCTYPE html>
<head>
   <title>iframe Video</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $( document ).on( "pagecreate", function() {
         
            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 )
               };
            };
            
            $( ".ui-popup iframe" )
            .attr( "width", 0 )
            .attr( "height", "auto" );
            
            $( "#popup_video" ).on({
               popupbeforeposition: function() {
               
                  // here calling custom function scale() to get the width and height
                  var size = scale( 497, 298, 15, 1 ),
                  w = size.width,
                  h = size.height;
                  $( "#popup_video iframe" )
                  .attr( "width", w )
                  .attr( "height", h );
               },
               
               popupafterclose: function() {
                  $( "#popup_video iframe" )
                  .attr( "width", 0 )
                  .attr( "height", 0 );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Header</h2>
         </div>
         
         <a href = "#popup_video" data-rel = "popup" data-position-to = "window" 
            class = "ui-btn ui-btn-inline">Play Video</a>
         <div data-role = "popup" id = "popup_video" data-theme = "a" 
            data-tolerance = "15,15" class = "ui-content">
            <iframe src = "/jquery_mobile/images/video.mp4" width = "400" 
               height = "200"></iframe>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
         
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_iframes_video.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_iframes_video.html y se mostrará el siguiente resultado.

↰ Previous page