VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
CHECK OUT OUR PAGE ON GOOGLE +
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me
  • Page:
  • 1

TOPIC: youtube in div

youtube in div 14 Mar 2014 14:00 #4261

Hello, I'm trying to use jf slideshow for display one youtube video, but I would like to show the video inside a div and not in a background. Is it possible? If yes, what I have to modify for doing that?

I look in the jquery.tubolar.1.0.js script that there are background injection and wrapper defalut settings at line 95.

I'm not expert in js script yet!

Thank you for your time!

Bye.
The topic has been locked.

  • Posts:4
  • eleni-srl
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: youtube in div 08 Apr 2014 05:31 #4441

Hi,
Currently module jf slideshow allowed display on div #tubular-container. You don't want the background.

Go to modules/mod_jfslideshow/assets/css/tubular.css
add block css
#tubular-container{
position: relative !important;
}

and appropriate amendments to your website

Support Team.
The topic has been locked.

  • Posts:2144
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: youtube in div 08 Apr 2014 07:50 #4444

Thank you for your replay,

I'm going to try your suggestion.

This extention is very usefull and well-developed! Good job!

Bye.
The topic has been locked.

  • Posts:4
  • eleni-srl
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: youtube in div 08 Apr 2014 08:43 #4446

Another question...

If I set in backend the position of the module,

why in the frontend, tubolar-container is inside body and not in the "myposition" declared in the main page of my website?


Slideshow work correctly, but when change to video tubolar-container jump inside body and had "element.style" css set by some php script i think!

any suggestion?


I would like to put the div "tubal-container" inside a specific position in my website, not at the top inside body ... position setting in backend seams don't work!


Thanks for your support!
The topic has been locked.

  • Posts:4
  • eleni-srl
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: youtube in div 08 Apr 2014 09:35 #4449

Hello
You open: modules/mod_jfslideshow/assets/js/jquery.tubular.1.0.js
find tubular line 40
replace old function tubular to new function tubular
var tubular = function(node, options) { // should be called on the wrapper div
var options = $.extend({}, defaults, options),
$body = $('body') // cache body node
$node = $(node); // cache wrapper node
 
// build container
var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 0; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; left: 0; top: 0;"></div>';
 
// set up css prereq's, inject tubular container and set up wrapper defaults
$('html,body').css({'width': '100%', 'height': '100%'});
$body.prepend(tubularContainer);
$node.css({position: 'relative', 'z-index': options.wrapperZIndex});
 
// set up iframe player, use global scope so YT api can talk
window.player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('tubular-player', {
width: options.width,
height: Math.ceil(options.width / options.ratio),
videoId: options.videoId,
playerVars: {
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
 
window.onPlayerReady = function(e) {
resize();
if (options.mute) e.target.mute();
e.target.seekTo(options.start);
e.target.playVideo();
}
 
window.onPlayerStateChange = function(state) {
if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
player.seekTo(options.start); // restart
}
}
 
// resize handler updates width, height and offset of player after resize/init
var resize = function() {
var width = $(window).width(),
pWidth, // player width, to be defined
height = $(window).height(),
pHeight, // player height, tbd
$tubularPlayer = $('#tubular-player');
 
// when screen aspect ratio differs from video, video must center and underlay one dimension
 
if (width / options.ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * options.ratio); // get new player width
$tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / options.ratio); // get new player height
$tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
}
 
}
 
// events
$(window).on('resize.tubular', function() {
resize();
})
 
$('body').on('click','.' + options.playButtonClass, function(e) { // play button
e.preventDefault();
player.playVideo();
}).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
e.preventDefault();
player.pauseVideo();
}).on('click', '.' + options.muteButtonClass, function(e) { // mute button
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
}).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
e.preventDefault();
var currentVolume = player.getVolume();
if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
player.setVolume(currentVolume - options.increaseVolumeBy);
}).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
e.preventDefault();
if (player.isMuted()) player.unMute(); // if mute is > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
player.setVolume(currentVolume + options.increaseVolumeBy);
})
}




Open modules/mod_jfslideshow/tmpl/youtube.php
find $jfmodhtml line 28

Replace same block code

 
$jfmodhtml = "
 
jQuery('document').ready(function() {
 
var options = { videoId: '$videoId', start: $startPosition, repeat:false, mute: $mute, repeat: $repeat };
 
//jQuery('body').wrapInner('<div id="
jf-divtubular" />');
 
jQuery('#slideshow').tubular(options);
 
});
"
;
Last Edit: 08 Apr 2014 09:40 by isupport.
The topic has been locked.
The following user(s) said Thank You: eleni-srl

  • Posts:2144
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: youtube in div 08 Apr 2014 09:48 #4450

Oky, now is all clear! thanks
The topic has been locked.

  • Posts:4
  • eleni-srl
  • Fresh Boarder
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 0.24 seconds

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.