javascript - Adding you tube player (iFrame) in jQuery modal dialog -


i have images in html , _i need play embedded tube video videos on click of each image should load/play in jquery ui dialog. pop video player.

so here have done play/attach video each image. have 3 images , have added unique video id in custom data-attribute taken tube.

html

<div id="imagebox">  <img src="img1.png" class="playvideo" alt="" id="image1" data-videoid="v6jg8g"/>  <img src="img2.png" class="playvideo" alt="" id="image2" data-videoid="re84hj"/>  <img src="img3.png" class="playvideo" alt="" id="image3" data-videoid="dhj3fk"/> </div>  <!-- html jquery modal dialog --> <div id="myvideoplayer">     <div>         <strong id="videotitle">title video</strong>         <img src="closebutton.png" id="close" alt="close" />     </div>     <iframe src="https://www.youtube.com/embed/myvideoid?wmode=opaque&autoplay=1&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1" id="player" width="100%" height="100%"></iframe> </div>

note: using iframe embed method you tube player api embed videos.

for javascript/jquery section, came 2 choices here.

1. because working in asp.net mvc 3 app, can set unique video id @viewbag in script , assign iframe this...

$('#imagesblock .playvideo').click(function(){     var myid = $(this).attr('data-videoid');     '@viewbag.videoid' = myid;     $('#myvideoplayer').dialog(         { width: 'auto' },         { height: 'auto' },         { draggable: false },         { resizable: false },         { closeonescape: false },         { modal: true },         { show: { effect: "fade", duration: 200} }     });        });

2. assign updated iframe src new video id each time dialog opens.

$('#imagesblock .playvideo').click(function(){     var myid = $(this).attr('data-videoid');      var src = 'https://www.youtube.com/embed/'+ myid +'?wmode=opaque&autoplay=1&autohide=1         &showinfo=0&controls=2&rel=0&enablejsapi=1';      $('#myvideoplayeriframe').attr('src', src);          $('#myvideoplayer').dialog(         { width: 'auto' },         { height: 'auto' },         { draggable: false },         { resizable: false },         { closeonescape: false },         { modal: true },         { show: { effect: "fade", duration: 200} }     });         });

which 1 should go with. found references though,

is there way can make little more simplified , re-usable in future. please advise wise opinion.

i little late updating thread managed create method or more of plugin extending jquery's prototype object. nice link start learning.

the following custom jquery plugin creating pop video player.

(function ($) {  $.fn.videoplayer = function (options) {      var defaults = $.extend({         title: "",         videoid: "",         autoplay: 1         //more default options can set here!     }, options);      var videobox = this.find('#videobox');     var videoelement = document.createelement('iframe');     var src = 'https://www.youtube.com/embed/' + defaults.videoid + '?wmode=opaque&autoplay=' + defaults.autoplay +         '&autohide=1&showinfo=0&controls=2&rel=0&enablejsapi=1';      this.find('#videotitle').text(defaults.title);     $(videoelement).attr({         'src': src,         'frameborder': 0,         'width': '100%',         'height': '90%'     });      videobox.html(videoelement);      this.dialog(         { width: 'auto' },         { height: 'auto' },         { draggable: false },         { resizable: false },         { closeonescape: false },         { modal: true },         { show: { effect: "fade", duration: 200} },         { hide: { effect: "fade", duration: 250} },         { close: function (event, ui) {             $(videoelement).remove();             $(this).dialog('destroy');         }         });      //making method chainable!     return this; };  })(jquery);

i have used custom html data-attributes video title , video id. 

<div id="imagesblock">    <img src="img-1.png" alt="image1" id="image1" data-videoid="v8_wezd160g" data-videotitle="video 1"/>    <img src="img-2.png" alt="image2" id="image2" data-videoid="m7lc1uvf-ve" data-videotitle="video 2"/>    <img src="img-3.png" alt="image3" id="image3" data-videoid="gnb8t5nbdqg" data-videotitle="video 3"/>  </div>

this make html more clean , code close generic. need style/customize pop according needs.

usage:

rather passing viewbag should avoid, or dialog code each pop up, can use method this,

$(function(){   $('#imagesblock img').click(function () {     var title = $(this).attr('data-videotitle');     var id = $(this).attr('data-videoid');      $('#videocatcher').videoplayer({        title: title,        videoid: id     });   }); });

keeping answer concise, here complete working demo styling , configuration (go edit link in demo more detail).


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more