Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Border around embedded videos ...

Question

Posted · Report post

Hi all

The recent update to 2.3 changed a few things on my site.

Most of the changes were minor layout and formatting alterations but the main one has been the white border around my YouTube videos. Before the upgrade these borders / padding were a pleasant semi transparent blue - Now they are brilliant white. Can anyone suggest how I might change it back. Thanks in advance.

Andrew.

post-369-0-45978900-1348833193_thumb.jpg

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

sub60videos.com

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob

For some reason I couldn't get yours to work - I'm a total newbie with CSS .., etc.

My son came up with:

.youtube_sc {

border: 5px solid #5782C0;

box-shadow: 0 1px 2px rgba(0,0,0,0.5);

}

It's not what I had - but now - it's just like the thumbnail border.

Once again Rob - Thanks for helping out.

Andrew

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Presently, I do not see any borders around your videos. Is this issue resolved?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob

I would love to have what I originally had before the upgrade to 2.3 (Blue Borders around embedded video), in the meantime however, it seems that borderless is a simpler support solution and looks a lot nicer than brilliant white borders.

I hope that makes sense :-) .... ?

Getting my original blue borders / padding back would be nice - Can you suggest how?

Thank you in advance,

Andrew

Share this post


Link to post
Share on other sites

Posted · Report post

Andrew,

I did this as a test. Add it to Dashboard > PageLines > Site Options > Custom Code > CSS Rules at the end.


.featured_branding_wrap {

    border: 3px solid white;

    overflow: hidden;

}

Mind you, it's white for visual purposes only. You can change the word 'white' to any color such as #C00000 (deep red) using alpha-numeric values, such as that or, using words like navy. Unfortunately, your images are not scaled properly, and I think you may have it set for Aspect rather than Static. I'm getting a 2 pixel gap on the left and about 30px on the bottom. If I change

.featured_branding_wrap {

    max-height: 410px;

}

to

.featured_branding_wrap {

    max-height: 390px;

}

The bottom gap vanishes.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob

Thanks for your efforts on this.

The border I'm talking about is the one that surrounded the embedded YouTube videos in the actual Sub60 posts - Not the featured branding wrap.

My first PageLines post on the topic (see above) has an image attached - This shows a white border around an embedded YouTube video.

The original colour of that border was a blue - Similar to the border around the post thumbnails .... see image post-369-0-36325600-1348967548_thumb.jpg.

Andrew

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

This is because from the looks of it, you have embedded your YouTube clip into a <pre>YouTube Link</pre> tags, remove these tags from your YouTube embed code and the border should be removed.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

While the original blue border was quite nice, no border at all is better than the white - Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

Andrew,

Try this:


.player-container {

-moz-transition: left 300ms ease 0s, right 300ms ease 0s;

border: 5px solid navy;

bottom: 0;

left: 0;

position: absolute;

right: 0;

top: 0;

}

Again, navy was used tor contrast to the background which is already blue.

If you want things like shadows, etc. copy and paste from the thumbnail CSS using Firebug.

Share this post


Link to post
Share on other sites

Posted · Report post

Can you please post a link to your site?

Share this post


Link to post
Share on other sites