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:
Any help would be much appreciated.
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
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.
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:
to the iFrame. That seemed to do the trick on my test server.
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]
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.