Yii2 Frame Bootstrap Popup preview video, etc. ~

The YII2 itself has been quoted as ' Yii\bootstrap\bootstrapasset ', so using bootstrap is very concise.

1 referencing namespaces in PHP pages use App\assets\appasset;

2 You can write the div of the IFRAME to eject directly on the PHP page, in which you can set the width height of the popup, the position, the dialog box title, etc.

 <Divclass= "Modal Fade"ID= "Mymodalpreview"TabIndex= "-1"role= "Dialog"Aria-labelledby= "Mymodallabel"Data-backdrop= "false">   <Divclass= "Modal-dialog"style= "width:800px;">      <Divclass= "Modal-content">         <Divclass= "Modal-header">            <Buttontype= "button"class= "Close"Data-dismiss= "Modal"Aria-hidden= "true"> &times;  </Button>            <h4class= "Modal-title"ID= "Mymodallabel">Video Preview</h4>         </Div>         <Divclass= "Modal-body">            <iframeclass= ' Iframeedit 'style= "Width:750px;min-height:500px;border:none;"src=""></iframe>         </Div>               </Div>  </Div></Div>

3 to click the Pop-up window button to add Data association: Data name to be transferred add Data-id to flag

<div class= ' itemvideopic ' style= ' cursor:pointer; ' data-id= ' <?=isset ($videourlsthis [0])? $videourlsthis [0]: ' Null '?> ' data-toggle= ' modal ' data-target= "#myModalpreview" ></div>

4 important step, write JS to pass the video information to the IFRAME, the method is the method of Bootstrap,

Things to be aware of the page after doing other operations need to re-register this method, can be encapsulated, multiple calls to register can

$ (' #myModalpreview '). On (' Show.bs.modal ', function (event) {
var button = $ (event.relatedtarget);  var id = button.data (' id ');　　var modal = $ (this); Modal.find ('. Iframeedit '). attr (' src ', '/vod/modules/personalcourse/views/personalco/videopreview.php?id= ' +id);
});

5. PHP page code for video preview

<?php$videourls=$_request[' id '];? ><div style= ' width:720px;height:450px; ' ><?php echo "<script type= ' text/javascript ' src= '/vod/web/sewise.player.min.js ' ></script>"?> <?php echo "<script type= ' Text/javascript ' >sewiseplayer.setup ({server: ' VOD ', type: ' flv ', Videourl: ' {$ Videourls} ', skin: ' Vodwhite ', title: ', Lang: ' Zh_cn ', starttime:0}); </script> "?></div>

The 6 effects are as follows:

7 bootstrap processing text too long code: (principle is the text too long to display the ellipsis, the mouse on the text, the top pop-up window to display all the text)

<li  style= ' cursor:pointer; ' class= ' Courseunpublishitem ' data-toggle= ' tooltip ' data-placement= ' top ' title= ' <?= $courseitem?> ">  <?= strlen ($courseitem) >15?mb_substr ($courseitem, 0,5, ' utf-8 '). ' ... ': $courseitem?>  </li>

Yii2 Frame Bootstrap Popup preview video, etc. ~