wa3l / jquery-tubular Goto Github PK
View Code? Open in Web Editor NEWAutomatically exported from code.google.com/p/jquery-tubular
License: MIT License
Automatically exported from code.google.com/p/jquery-tubular
License: MIT License
What steps will reproduce the problem?
1. view a 'tubular' site in firefox 3.6
What is the expected output? What do you see instead?
The expected output is the video background, but it is not rendered at all.
What version of the product are you using? On what operating system?
The demos provided aren't working
Please provide any additional information below.
I'm happy to help troubleshoot. I had a site in mind for this plugin, but in
my initial browser testing it didn't seem to render the vid.
Original issue reported on code.google.com by [email protected]
on 27 Jan 2011 at 9:15
don't work:
<script type="text/javascript">
$('document').ready(function() {
var options = { videoId: 'videoseries?list=PL63F0C78739B09958', start: 1 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
</script>
Original issue reported on code.google.com by [email protected]
on 17 Apr 2013 at 12:41
Hello evreyone,
I've got a little problem..
When i inplanted the tubular Youtube BG it works perfectly in evry browser but
not in IE V10.
Can anyone help me with this?
It's pretty urgent.
With Kind Regards,
Joran Veenman
Original issue reported on code.google.com by [email protected]
on 2 May 2013 at 3:47
Tubular stopped working this afternoon. The message in my console says:
Unable to post message to http://www.youtube.com. Recipient has origin
https://www.youtube.com.
Thought you would like to know.
Original issue reported on code.google.com by [email protected]
on 19 Nov 2013 at 4:55
What steps will reproduce the problem?
1. Loading the plugin properly
What is the expected output? What do you see instead?
The video should be tight to the browser chrome but there is some extra space,
probably from the use of $().width(). I'll figure this out when I get a chance.
Original issue reported on code.google.com by [email protected]
on 21 Nov 2010 at 9:45
Would like some help in making changes so that this renders in Divs and not
just in the master body wrap. More useful as Div background.
Trying to apply to div class="big-video-wrap"
<code>
/* jQuery tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* version: 1.0
|* updated: October 1, 2012
|* since 2010
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */
;(function ($, window) {
// test for feature support and return if failure
// defaults
var defaults = {
ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no?
mute: true,
repeat: true,
width: $(window).width(),
wrapperZIndex: 99,
playButtonClass: 'tubular-play',
pauseButtonClass: 'tubular-pause',
muteButtonClass: 'tubular-mute',
volumeUpClass: 'tubular-volume-up',
volumeDownClass: 'tubular-volume-down',
increaseVolumeBy: 10,
start: 0
};
// methods
var tubular = function(node, options) { // should be called on the wrapper div
var options = $.extend({}, defaults, options),
$VidWrap = $('.big-video-wrap') // cache body node
$node = $(node); // cache wrapper node
// build container
var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; 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; position: absolute; left: 0; top: 0;"></div>';
// set up css prereq's, inject tubular container and set up wrapper defaults
$('.big-video-wrap').css({'width': '100%', 'height': '100%'});
$VidWrap.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();
})
$('.big-video-wrap').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 on, unmute
var currentVolume = player.getVolume();
if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
player.setVolume(currentVolume + options.increaseVolumeBy);
})
}
// load yt iframe js api
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// create plugin
$.fn.tubular = function (options) {
return this.each(function () {
if (!$.data(this, 'tubular_instantiated')) { // let's only run one
$.data(this, 'tubular_instantiated',
tubular(this, options));
}
});
}
})(jQuery, window);
</code>
Original issue reported on code.google.com by [email protected]
on 26 Jan 2013 at 8:14
The script seems to of stopped working as well as your demo:
http://www.seanmccambridge.com/tubular/
Original issue reported on code.google.com by [email protected]
on 11 May 2012 at 9:22
What steps will reproduce the problem?
Using IE7
What is the expected output? What do you see instead?
Video should be filling the whole window but instead is not positioned in the
top left corner.
What version of the product are you using? On what operating system?
windows7 IE7 (IE10 with IE7 document mode)
Please provide any additional information below.
Solution: add left:0; top:0; to tubular-container style.
Works like a charm then, even in IE7.
Original issue reported on code.google.com by [email protected]
on 14 Feb 2013 at 1:50
I found a terrific application, but could not get to start by making sound, is
this possible? Adding 'true ' or 'false' or on / off? appreciate the response.
congratulations on the job!
Original issue reported on code.google.com by [email protected]
on 11 Apr 2011 at 8:45
Video dont go PLAY
Original issue reported on code.google.com by [email protected]
on 26 Nov 2013 at 1:28
Hi there!
Really great plugin. Wondering if you know of a way to turn off the display
when viewing through a mobile device?
Thank you!
~J.T.
Original issue reported on code.google.com by [email protected]
on 27 Oct 2012 at 2:39
Hi! Both in demo index.html and in the description of the component on this
site you pasted this code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
It doesn't work because it lacks of an "http" protocol. This is the right code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
Original issue reported on code.google.com by [email protected]
on 25 Nov 2012 at 7:15
not all the people have the bandwidht to reproduce youtube HD
what are the other setPlaybackQuality('medium'); options?
i use 'low' but it dont work.
Can you help me please?
Original issue reported on code.google.com by [email protected]
on 7 Feb 2011 at 8:09
instructions.txt has miss-spelling of function as funciton on line 23
Original issue reported on code.google.com by [email protected]
on 18 Jan 2012 at 5:57
I need to hide all video controls of the video (volume, time, play, pause,
etc.) - in other words, the strip at the bottom of the video. Is this
possible, and if so, what would the code be, and in which file would it go?
Many thanks!
Original issue reported on code.google.com by [email protected]
on 17 Feb 2012 at 2:15
How can i edit this script, so that youtube videos do NOT repeat?
In "jquery.tubular.1.0.js" i have edited line 22 into "repeat: false," but this
doesn't change anything.
Thanks a lot for your help
Kind regards
Original issue reported on code.google.com by [email protected]
on 18 Jan 2013 at 10:39
What steps will reproduce the problem?
1. How can I make a playlist playing in the background? I did a search for
hours on the internet but I didn't find anything that works. Can you maybe help
me ?
Original issue reported on code.google.com by [email protected]
on 24 Mar 2013 at 6:54
It is possible to use the function "pause" to pause the background video if any
other video play on the page?
I ask this because I have a website that show thumbnails of videos and I am
using jquery-tubular as background of my page but when I play other video all
become to slow and that is expected.
It will be great if there is any way to use the "pause" option to make the
background video pause when other video plays on web-page. Or maybe some small
change on the code to do that.
I have made a lot of tests but I need some help or advice.
Anyone have an idea how to do this?
Original issue reported on code.google.com by [email protected]
on 20 Apr 2012 at 10:40
Trying to do some buttons to show more videos, I don't know that clearVideo()
does but I had to empty some generated ID's:
$('#nextvideo').click(function() {
ytplayer.stopVideo();
ytplayer.clearVideo();
$('#yt-container, #video-cover').remove();
$('body').tubular('sbvG8fAoUOE','container');
});
Original issue reported on code.google.com by [email protected]
on 7 Sep 2011 at 4:10
What steps will reproduce the problem?
1. play tubular site in google chrome
What is the expected output? What do you see instead?
able to stop, mute, pause/play both with #video-controls and the player
controls at the bottom left of the vid. #video-controls works great, but the
player controls do not (flash issue?)
What version of the product are you using? On what operating system?
windows 7 / chrome 8.0.552.237
Please provide any additional information below.
jquery plugin works as expected in IE8 with both #video-controls and embedded
player controls working.
Original issue reported on code.google.com by [email protected]
on 27 Jan 2011 at 9:20
I would like to have the ability to start a video after x number of seconds.
Original issue reported on code.google.com by [email protected]
on 13 Feb 2012 at 9:19
1. Your comment on line 19 wasn't escaping due to the first forward slash "16/9"
2. Not using "http:" on line 133 wasn't playing the video for me.
After these two fixes, it worked for me. Cheers! :)
Original issue reported on code.google.com by [email protected]
on 14 Jun 2013 at 4:30
Attachments:
When I use tubular (which I love, thanks for the hard work) I get the following
problem:
From console in Webkit:
Unable to post message to http://www.youtube.com. Recipient has origin
http://mydevsite.dev.
Unsafe JavaScript attempt to access frame with URL http://mydevsite.dev/xxx/
from frame with URL
http://www.youtube.com/embed/JtveCvxttG4?controls=0&showinfo=0&modestbranding=1&
wmode=transparent&enablejsapi=1&origin=http%3A%2F%2Fmydevsite.dev. Domains,
protocols and ports must match
This happens on Webkit browsers (Chrome), not in Firefox.
Any ideas?
Original issue reported on code.google.com by [email protected]
on 28 Jan 2013 at 6:45
What steps will reproduce the problem?
1. Visit http://www.creabox.es/themes/verde/index_video2.php in Safari 7
What is the expected output? What do you see instead?
The video doesn't start
What version of the product are you using? On what operating system?
Tubular 1.0, Safari 7, jQuery 1.9.1
Please provide any additional information below.
Original issue reported on code.google.com by [email protected]
on 21 Nov 2013 at 7:42
What steps will reproduce the problem?
1. loop=1
2. loop=true
3. loop=0
What is the expected output? What do you see instead?
Make working the loop function
Please provide any additional information below.
I can't do work the loop function. Am I missing something ?
Original issue reported on code.google.com by [email protected]
on 12 May 2012 at 8:17
I really like your plugin and it works fine, but i'm searching for a clean way
to hide the mission-controls if flash is not activated.
Would be great if you have an solution, that can be intregrated into the
jquery.tubular.js
Original issue reported on code.google.com by [email protected]
on 5 Dec 2011 at 9:12
What steps will reproduce the problem?
1. I uploaded the script to my hosting.
2. The message is showed at the center of the screen: An error occured, please
try again later.
What is the expected output? What do you see instead?
The message is showed at the center of the screen: An error occured, please try
again later.
What version of the product are you using? On what operating system?
- Windows 7
- Google Chrome 17.0.963.56 m
- Firefox 10.0.2
Original issue reported on code.google.com by [email protected]
on 4 Mar 2012 at 1:07
Attachments:
What steps will reproduce the problem?
1. Loading demo page on iPad.
2.
3.
What is the expected output? What do you see instead?
See "play" symbol, cannot press
What version of the product are you using? On what operating system?
Loading your demo page(http://seanmccambridge.com/tubular) on ipad with iOS 6
Please provide any additional information below.
Original issue reported on code.google.com by [email protected]
on 30 Sep 2012 at 7:35
When playing a video, an advertising pop up (i think from google) shows.
It can´t be closed or skipped.
I'm using jquery.tubular.1.0.1, on windows 7 and Mac
Original issue reported on code.google.com by [email protected]
on 10 Sep 2013 at 5:10
What steps will reproduce the problem?
1. Visit http://helloworld.com.au/holder in Safari 5.1.7
What is the expected output? What do you see instead?
Expected the video to loop, but is running until the end of the video then
stopping
What version of the product are you using? On what operating system?
Tubular 1.0, Safari 5.1.7, jQuery 1.8.3, OSX 10.6
Please provide any additional information below.
Original issue reported on code.google.com by [email protected]
on 26 Nov 2012 at 11:30
What steps will reproduce the problem?
1. set the quality of youtube video.
What is the expected output? What do you see instead?
higher resolution rather than the default 360px
Original issue reported on code.google.com by [email protected]
on 7 Dec 2011 at 8:35
What steps will reproduce the problem?
1. Load the simple demo
https://dl.dropboxusercontent.com/u/11833872/stupil_prototype/youtube_iframe_tub
ular.html
2. Verify that the video can't be played.
What is the expected output? What do you see instead?
The video should display a play button and be pressed by the end user. Instead
we see a black background.
What version of the product are you using? On what operating system?
Android 2.2+, iOS 4+
Please provide any additional information below.
This fix eliminates autoplay on desktop in exchange for having a working
youtube video on mobile. The play, pause, and seekto features may still be used
once the video has been interacted with by a user.
Original issue reported on code.google.com by [email protected]
on 23 Aug 2013 at 4:46
Attachments:
Hello Sir
Is it possible with tubular to play video in background of a small area only (a
div) and not on whole page. Please let me know how can I do it.
Thanks
Anchit Jindal
Original issue reported on code.google.com by [email protected]
on 1 May 2013 at 11:48
How to update the volume, if I have a volume slider? Where would I insert the
value (0 - 100) ?
Original issue reported on code.google.com by [email protected]
on 20 Oct 2013 at 7:05
Hello - Just an alert that the "YouTube Options for Google Chrome" plug-in
seems to break the latest version of the script. The poster frame appears with
a play button but the controls are dead.
I have the previous version of the script installed on a site and it does not
have this issue. Using OS X Chrome v23.0.1271.101.
Original issue reported on code.google.com by [email protected]
on 19 Dec 2012 at 3:15
1.(Optional) Change the body background to be black;
2. Modify line 42
"var tubularContainer = '<div id="tubular-container" style="overflow: hidden;
position: fixed; top:50px; z-index: 1; width: 100%; height: 100%; opacity:0;"
-Add opacity:0;
3. Modify line 74.
-After "e.target.playVideo();" add...
$('#tubular-container').animate({'opacity':'100'},100000);
There may be better ways of doing this, but this method seems to work for me.
Makes for a more elegant load.
Original issue reported on code.google.com by [email protected]
on 7 Oct 2012 at 10:07
please visit www.omis.ca/clients/mrt to see the issue.
Video loads properly, however all the content doesn't not. The content that is
currently there looks like this: http://screencast.com/t/VfGcCMjoPII but the
video js seems to load "overtop" of the content.
Using Firefox v 14.0.1
Original issue reported on code.google.com by [email protected]
on 8 Aug 2012 at 2:17
What steps will reproduce the problem?
1. opened in IE9
2.
3.
What is the expected output? What do you see instead?
What version of the product are you using? On what operating system?
Please provide any additional information below.
Simply getting " Currently unavailable in IE9 ".. works fine in Firefox .. Is
it just me ?
Original issue reported on code.google.com by [email protected]
on 28 Oct 2012 at 12:46
The script works fantastically well as intended on a non-mobile devise. But on
an andoid browser, tablet in my case, the video does not play because of flash
not being an availble plug-in and even with the flash plug-in installed. The
page goes out of wack as any mobile browser I've tried does not reder it well.
So my question is:
Can someone come up with some code that will hide the script if a mobile
browser is detected.
Even using a media query does not work because most tablet browsers can handle
the desktop version of a site.
If using a Agent sniffer to detect mobile and redirect, that means you will
have to recreate the site for a mobile version - which Im trying to avoid.
Using css, I'd like to hide the script if the max-width is 768px lets say.
Im not the best at css so I dont know if this is possible.
Can't hide the wrapper because then the whole site disappears.
Just need to strip the code if mobile is detected or if screen size falls below
768px... Any ideas anyone?
thanks in advance.
Love the script.
Original issue reported on code.google.com by [email protected]
on 6 Jan 2013 at 6:45
What steps will reproduce the problem?
1. setting mute:true in plugin options
What is the expected output? What do you see instead?
In Google Chrome it reproduces audio although i set "mute:true" in options
array.
What version of the product are you using? On what operating system?
Windows 7. Release 1.0.1
Original issue reported on code.google.com by [email protected]
on 27 Nov 2012 at 9:55
What steps will reproduce the problem?
1. tubular does not work on an ipad
What is the expected output? What do you see instead?
will there be an upgrade version for ipad???
Original issue reported on code.google.com by [email protected]
on 20 Dec 2011 at 6:47
What steps will reproduce the problem?
1. View Demo or another page leveraging the Tubular plugin; when
[background/wrapper] player tries to load the video, it results in a youtube
error message.
What is the expected output? What do you see instead?
• Expected output: Load and render video.
• Instead: Player displays the following youtube error:
"The video you have requested is not available.
If you have recently uploaded this video, you may need to wait a few minutes
for the video to process."
What version of the product are you using? On what operating system?
Firefox 5, Windows 7
Please provide any additional information below.
Using: jQuery 1.6.2
Working in the following browsers: Chrome, Safari, IE9
(Looks like it's only an issue in FF5)
Original issue reported on code.google.com by [email protected]
on 7 Jul 2011 at 1:21
Attachments:
Hi, I'm implementing a tubular solution, as described in the demo and
tutorials. It all works fine and dandy except in Internet Explorer 9: it never
loads the video at the first time I load de page. It only loads it when I
refresh the page...
What can I do to make it work all the time? Thanks in advance for your support.
Original issue reported on code.google.com by [email protected]
on 5 Jan 2013 at 11:14
What steps will reproduce the problem?
1. view a 'tubular' site in the latest version of IE 9
What is the expected output? What do you see instead?
The expected output is the video background, but it is not showed at all.
What version of the product are you using? On what operating system?
The demos provided aren't working
thanx
Original issue reported on code.google.com by [email protected]
on 23 Aug 2011 at 10:49
I dun want to video been load while I go into the website, I want the user to
click then only the video will play. Any idea for that?
Original issue reported on code.google.com by *[email protected]
on 28 Jul 2011 at 6:16
What steps will reproduce the problem?
1. demo flashes up with video, then black screen on ios 7.02
2.
3.
What is the expected output? What do you see instead?
Still be able to see the video and press the play button
What version of the product are you using? On what operating system?
Latest version, and on demo. ios 7.02
Please provide any additional information below.
Original issue reported on code.google.com by [email protected]
on 16 Oct 2013 at 5:29
What steps will reproduce the problem?
1. How can I set the quality of the youtube video?
What is the expected output? What do you see instead?
I have been reading up on the Youtube API but still not sure how to change the
quality of the video.
Original issue reported on code.google.com by [email protected]
on 23 May 2013 at 12:23
If you go to this url:
http://parttimeportugues.com/22anos-s/?nr=51
You will see the google adwords pub showing and a small thumbnail on the
top-right corner.
Is it possible to remove these?
I'm using:
//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
jquery.tubular.1.0.js
Thanks,
Diogo Gomes
Original issue reported on code.google.com by [email protected]
on 11 Jul 2013 at 9:35
Not sure if I am the only one experiencing this, but in IE(9) the video is
clickable. To fix this, I used this CSS:
<pre><code>#video-cover{
background: black;
opacity:0.00000000000000001;
}</code></pre>
Original issue reported on code.google.com by [email protected]
on 1 Feb 2012 at 6:31
What steps will reproduce the problem?
1. Open www.castingcouture.com/index5.html
What is the expected output? What do you see instead?
The video should start automatically. Youtube video doesn't start automatically
like it should and as it did couple of weeks ago.
What version of the product are you using? On what operating system?
Latest version (copyright 2010??). Chrome/Firefox on Win7.
Please provide any additional information below.
Your great js was working perfectly until couple of days ago, when the videos
stopped autoplaying.
Thank you for the support and the good work!
Original issue reported on code.google.com by [email protected]
on 16 May 2012 at 8:33
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.