dryhurst / jquery-tubular Goto Github PK

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>

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

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.

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.

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 

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.

Video dont go PLAY

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?

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.

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 ?

The script seems to of stopped working as well as your demo:
http://www.seanmccambridge.com/tubular/

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

instructions.txt has miss-spelling of function as funciton on line 23

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');
});

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>

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

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

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.

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?

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! 

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

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

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 ?

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

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.

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?

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.

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.

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>

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 ? 

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.

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!

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!

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)

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???

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?

How to update the volume, if I have a volume slider? Where would I insert the 
value (0 - 100) ?

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.

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.

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.

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

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. 

I would like to have the ability to start a video after x number of seconds.

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! :)

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

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.

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

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> 

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. 

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.