Skip navigation
Currently Being Moderated

Why does border appear around embedded video?

Oct 11, 2012 2:45 PM

Tags: #cs5 #video #links #css #html5

Hello,

 

I have an embedded YouTube video in a page on my site. It was working fine for a while but I've just discovered that there is now a black edge showing on the left, right and bottom of the video? I created a white round cornered frame within Premier so that it's part of the video. I did this as the pgae it's embedded in is white so that when it plays back it appears seamless and with curved edges to match it's container. This worked fine for a week or so but now it has these black edges? Can anybody tell me why? You can see for yourself at www.glovesanddoves.com. Go to the fighters page and you'll see the video at the bottom. The video's width is a multiple of 16 and the ratio is 16:9 at 384px X 216px. The containg Divs are also set to these measurements.

 

I've attached a screenshot below:

 

G&D_screenshot.jpg

 

Any help would be much appreciated.

 

Jack

 
Replies
  • Currently Being Moderated
    Oct 11, 2012 2:53 PM   in reply to Quadzilla_1111

    I'm not 100% sure whether you can override YouTube's code.  Can we see a link to the page so we can examine the source code?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 11, 2012 3:06 PM   in reply to SnakEyez02

    Link is in the original post

     

    www.glovesanddoves.com

     

    "Go to the fighters page and you'll see the video at the bottom"

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 11, 2012 3:46 PM   in reply to Quadzilla_1111

    No prob in FF 15.0.1or IE 8  on PC - Rounded corners boxes on both

     

    NOTE: uncontrollable sound volume is a dealbreaker for lots of visitors

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 11, 2012 5:10 PM   in reply to Quadzilla_1111

    Sorry, missed the instructions in the post when I was reading.  The page shows rounded corners for me in Safari until it plays then it adds in a border attribute from YouTube.

     

    In theory the new attribute "seamless" being added to the iframe should remove that border (eg: <iframe src="#" seamless"></iframe>).  If i remember correctly in the new version of Safari there is an issue with the Flash Player that YouTube uses and the HTML5 version of YouTube gets enabled for Safari.  This is partly why it doesn't affect Chrome even though they are both webkit.  However, that does not seem to work with YouTube.

     

    What I found will work is to add:

     

    style="border:none;"

     

    to the iFrame.  That seemed to do the trick on my test server.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 12, 2012 7:50 AM   in reply to Quadzilla_1111

    Yes that's correct.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 23, 2012 2:05 PM   in reply to Quadzilla_1111

    Looks OK in FF & IE

    tmp.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 15, 2012 2:28 PM   in reply to Ken Binney

    Yes, you're right but the only browser that has this border is Safari? Safari is usually the least problematic and it's so annoying. Just can't seem to get rid of it. Any advice for this specific browser would be really appreciated. Below is anothe rscreenshot.

     

    Jack

     

    G&D.jpg

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 3, 2013 5:48 PM   in reply to Quadzilla_1111

    Hi, It still doesn't work in Safari? I'm desperate to get rid of those borders. Any ideas?

     

    http://www.glovesanddoves.com/fighters.htm

     

     

    Thanks

     

    Jack

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points