Solved

How do I change the border around a fancybox/vimeo video??

Posted on 2013-12-08
9
2,029 Views
Last Modified: 2013-12-09
Hi-

I'm using Fancybox to display videos hosted on Vimeo.  The problem is that when the videos open they have this thick border around them.  The border is imposed by fancybox - not Vimeo.  

I want to remove this border completely.

I've used "Inspect Element" and it always indicates that
.fancybox-skin

Open in new window

is the correct selector to change but when I make the changes on the actual mark up - nothing happens.

I can change the color of it using
.fancybox-skin {background:#; }

Open in new window

but if I add
border:0;

Open in new window

in the same class no change will be seen.

Please take a look at the web page showing what I'm talking about here and provide some instructions on how I can remove that thick white border around the video.

Thanks.
0
Comment
Question by:dzash2000
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 9

Expert Comment

by:QuinnDex
ID: 39704847
the white border isnt a border, its padding

change this line

<div class="fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened" tabindex="-1" style="width: 830px; height: auto; position: absolute; top: 69px; left: 523px; opacity: 1; overflow:

Open in new window


to

<div class="fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened" tabindex="-1" style="width: 800px; height: auto; position: absolute; top: 69px; left: 523px; opacity: 1; overflow:

Open in new window


and this line

<div class="fancybox-skin" style="padding: 15px; width: auto; height: auto;">

Open in new window


to

<div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;">

Open in new window

0
 

Author Comment

by:dzash2000
ID: 39704919
QuinnDex - thanks for the reply.

I understand that the white border is the result of padding.

I can't find the lines you're instructing me to change.

I opened jquery.fancybox.css and changed .fancybox-skin so that padding:0px.

I could not find all the selectors you list in your first instruction grouped together anywhere but where ever I did find one of them I made sure that any padding was "0px;".  Then I included your exact change within style tags at the top of the page.  

I tried putting your CSS inline around the link to the vimeo player link, and then the div around it, and then the div around that.

None of these steps even remotely achieved the effect I'm looking for.

Perhaps if you can explain where your suggested changes should be made - that might help me.

Thanks.
0
 
LVL 9

Expert Comment

by:QuinnDex
ID: 39704929
that i cant say, all i can see is what is in the page  the first line is the video container and its 30px larger than the actual video.

the video div itself has a 15px padding creating a 15px border


using firebug i was able to change these values and remove the border, you will need to look through your code and locate where these lines are or where they are generated and make the changes. the values ar not in the css they are in the code itself
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39704974
You basically handed over the styling on the page to fancybox.  If you want to get rid of its bloated scripted presentation you will either need to got through the fancybox script files to find the spot where it is overriding, or toss it out and do your own presentation.

When you use third party code it is great until you want to do something the author either did not anticipate or does not have the skills to put in the hooks.  So when you commit to a plugin you need to make sure it allows access to ALL the code easily, or you learn to do things yourself so you don't have to overcome limitations imposed by someone else.

Cd&
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:dzash2000
ID: 39705004
It is frustrating to get a piece of information from Firebug that cannot be acted upon - but that is the situation that prompted me to ask the question in the first place.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39705024
Fancybox is like a lot of other third party junk.  It assumes that you are using a plugin because you are not capable of the complexity of DOM manipulation.  Based on that assumption hacks and junk code that ignores best practice can be used because you don't need to do maintenance to change the author's "perfect design".

The worst of it is that after you find the script fragment and make a change, you will now have a new problem.  You will no longer be able to rely on an update of the plugin.  An update will either knock out your change; or you will be forever stuck with the version you have.

Cd&
0
 

Author Comment

by:dzash2000
ID: 39706735
You've described the world I live in.  In order to build something for the web on a budget (time & money) I rely on 3rd party code.  Once I do finish something I never upgrade any JS - for exactly the reason you state.
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39706798
Some plugins are not that bad. The options can be overridden in this case.

In your page there is a piece of javascript (near the bottom) to initialize the fancybox, add the override for padding there:
 <script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
//Boolean and integer values should go without quotes.
padding: '0px',
//maxWidth : 800,
//maxHeight : 600,
fitToView : true,
//width : '96%',
//height : '84%',
autoSize : true,
closeClick : true,
openEffect : 'elastic',
closeEffect : 'none'
});
});
</script> 

Open in new window

0
 

Author Closing Comment

by:dzash2000
ID: 39706810
An elegant solution.  Thanks for looking and responding.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now