Home > Drupal > Drupal – video popout option as vimeo

Drupal – video popout option as vimeo

Steps for integration:
1. Add the below code where you have video link,

<?phpecho

‘<link href=”‘.$base_url.’/sites/all/themes/scaccarium/jquery-ui.css” rel=”stylesheet” type=”text/css”/>

<script src=”‘.$base_url.’/sites/all/themes/scaccarium/js/jquery.min.js”></script>

<script src=”‘.$base_url.’/sites/all/themes/scaccarium/js/jquery-ui.min.js”></script>

<script type=”text/javascript” src=”‘.$base_url.’/sites/all/themes/scaccarium/js/fancybox/jquery.fancybox-1.3.4.js”></script>

<link rel=”stylesheet” type=”text/css” href=”‘.$base_url.’/sites/all/themes/scaccarium/js/fancybox/jquery.fancybox-1.3.4.css” media=”screen” />

<script type=”text/javascript”>

$(document).ready(function() {

$(“.videolist”).fancybox({

“width” : “48%”,

“height” : “44%”,

“autoScale” : false,

“transitionIn” : “none”,

“transitionOut” : “none”,

“type” : “iframe”

});

});

</script>’;

$bpath = $base_url.”/keyarticle/flowplayer?href=”.$base_url.”/”.$vidval[“filepath”].”&width=540&height=304″;

$attributes = array(‘attributes’ => array(‘id’ => ‘various3’, “class”=>”videolist”));

$cont = “<li>”.l($vidval[“filename”], $bpath, $attributes).”</li>”;

?>

2.  Include all the relevant files appropriately

3. Customize the jquery.fancybox-1.3.4.js as below,

$(document).ready(function() {

$.fancybox.init();

$( “#fancybox-wrap” ).draggable();

$( “#fancybox-wrap” ).resizable();

$(“#fancybox-wrap”).resize(function() {

var height = $(“#fancybox-wrap”).height();

var width = $(“#fancybox-wrap”).width();

var height = height-0;

var width = width-0;

var newheight = height-40;

var newwidth = width-40;

var newheight = newheight + “px”;

var newwidth = newwidth + “px”;

var height = height + “px”;

var width = width + “px”;

var framename = document.getElementById(‘fancybox-frame’);

var frmname = (framename.contentDocument) ? framename.contentDocument :framename.contentWindow.document;

frmname.getElementById(‘player’).style.height = newheight;

frmname.getElementById(‘player’).style.width = newwidth;

document.getElementById(‘fancybox-frame’).style.height = height;

document.getElementById(‘fancybox-frame’).style.width = width;

document.getElementById(‘fancybox-content’).style.height = height;

document.getElementById(‘fancybox-content’).style.width = width;

});

});

4.  Also the jquery.fancybox-1.3.4.css to fix our own style,

#fancybox-wrap {

position: absolute;

top: 0;

left: 0;

padding: 20px;

z-index: 1101;

outline: none;

display: none;

background:#0B183B;

-moz-border-radius:10px;

cursor:pointer

}

#fancybox-outer {

position: relative;

width: auto;

height: auto;

padding:10px

}

#fancybox-content {

width: 0;

height: 0;

padding: 0;

outline: none;

position: relative;

overflow: hidden;

z-index: 1102;

}

#fancybox-frame {

overflow:hidden;

border: none;

display: block;

}

5. Now click the video link, we will get a popout option with draggable & resizable.

Advertisements
Categories: Drupal
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: