andystu / jquery-tubular

Automatically exported from code.google.com/p/jquery-tubular
MIT License
0 stars 0 forks source link

Known issue: extra space on sides #1

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago
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 seanmcca...@gmail.com on 21 Nov 2010 at 9:45

GoogleCodeExporter commented 8 years ago
[deleted comment]
GoogleCodeExporter commented 8 years ago
var videoRatio = 16/9.27;

works for me

Original comment by krishmar...@gmail.com on 8 Mar 2011 at 8:20

GoogleCodeExporter commented 8 years ago
Update: 2011-05-26 -- I haven't worked on this project for some months.  Will 
try to work this out soon.  Thanks for the suggestion, krishmaratalata.

Original comment by seanmcca...@gmail.com on 27 May 2011 at 4:02

GoogleCodeExporter commented 8 years ago
Yeah, I've found that too!

I got it to flush against the sides. Go to the tubular jquery folder. Find this 
section near the bottom.

function resizePlayer() {
    var newWidth = jQuery(window).width() + 40; // original page width
    var newHeight = jQuery(window).height(); // original page height

..... etc

Change
var newWidth = jQuery(window).width(); // original page width
To
var newWidth = jQuery(window).width() + 40; // original page width

And add css to your style file:

#myytplayer {
    margin-left:-20px;  
}

Original comment by gblac...@googlemail.com on 3 Nov 2011 at 8:13

GoogleCodeExporter commented 8 years ago
bump on comment #4 worked for me. 

Original comment by eneth...@gmail.com on 19 Jan 2012 at 7:43

GoogleCodeExporter commented 8 years ago
The +40 addition from comment 4 helped make it better. But the #myytplayer 
addition is supposed to go into the screen.css file, or?

Original comment by advanfr...@gmail.com on 5 Feb 2012 at 11:46

GoogleCodeExporter commented 8 years ago
I would go so far as to add +50 to both height and width, that hides the video 
controls and bars on the sides. Then add margin-left -25px to your stylesheet. 
(No real need to add the top margin).

To comment 6: add it to your styleesheet

Original comment by gasparg...@gmail.com on 22 Apr 2012 at 3:34

GoogleCodeExporter commented 8 years ago
The new version allows you to specify your own aspect ratio.  It defaults to 
16/9, but many videos are not exactly 16/9 so you can tweak to get the 
dimensions exactly right.  When calling .tubular() pass ratio: 16/9 or 16.5/9 
or whatever you need to get the proper ratio.  .tubular() accepts options as a 
single object.  for example:

$('#wrapper').tubular({videoID: '12345', ratio: 4/3});

Hope this helps!

Original comment by seanmcca...@gmail.com on 1 Oct 2012 at 10:19