Skip navigation
Quadzilla_1111
Quadzilla_1111
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

1582 Views   11 Replies   Latest reply: Quadzilla11111, Jan 3, 2013 5:48 PM
 
Replies
  • SnakEyez02
    Currently Being Moderated
    1. SnakEyez02,
    Oct 11, 2012 2:53 PM   in reply to Quadzilla_1111
    Report

    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:
  • John Waller
    Currently Being Moderated
    2. John Waller,
    Oct 11, 2012 3:06 PM   in reply to SnakEyez02
    Report

    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:
  • Ken Binney
    Currently Being Moderated
    3. Ken Binney,
    Oct 11, 2012 3:46 PM   in reply to Quadzilla_1111
    Report

    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:
  • Quadzilla_1111
    Currently Being Moderated
    4. Quadzilla_1111,
    Oct 11, 2012 3:53 PM   in reply to Ken Binney
    Report

    It only seems to be affecting the page when viewed in Safari although it was working fine for over a week before today?

     

    Date: Thu, 11 Oct 2012 16:39:47 -0600

    From: forums@adobe.com

    To: jsr27174@hotmail.com

    Subject: Re: Why does border appear around embedded video? Why does border appear around embedded video?

     

     

     

     

     

     

          

               

               

               

        Re: Why does border appear around embedded video?

     

     

        created by Ken Binney in Dreamweaver General - View the full discussion

     

     

     

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

     

     

         Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/4767926#4767926

         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: Re: Why does border appear around embedded video?

         To unsubscribe from this thread, please visit the message page at Re: Why does border appear around embedded video?. In the Actions box on the right, click the Stop Email Notifications link.

          

         Start a new discussion in Dreamweaver General by email or at Adobe Community

      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

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

    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:
  • Quadzilla_1111
    Currently Being Moderated
    6. Quadzilla_1111,
    Oct 12, 2012 6:06 AM   in reply to SnakEyez02
    Report

    Hi, Thanks very much indeed. So Is this the correct code:

     

    <div id="video">
<iframe frameborder="0" height="216" 
src="http://www.youtube.com/embed/GLXrAoNcvXk?HD=1;rel=0;showinfo=0;controls=0" style="border: none;" width="384">
</iframe>
</div>

     

    [Message was edited by moderator to format code]

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

    Yes that's correct.

     
    |
    Mark as:
  • Quadzilla_1111
    Currently Being Moderated
    8. Quadzilla_1111,
    Oct 23, 2012 1:46 PM   in reply to SnakEyez02
    Report

    Hi, Thanks very much for the advice. I added the code you suggested but I still get the annoying black border left, right and bottom? Do you know of any other solutions that could help rid me of this eyesore? Any help would be much appreciated.

     

    Jack

    www.glovesanddoves.com

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    9. Ken Binney,
    Oct 23, 2012 2:05 PM   in reply to Quadzilla_1111
    Report

    Looks OK in FF & IE

    tmp.jpg

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

    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:
  • Quadzilla11111
    Currently Being Moderated
    11. Quadzilla11111,
    Jan 3, 2013 5:48 PM   in reply to Quadzilla_1111
    Report

    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:
Actions

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