Web Overlay with rounded corner

Hello,
I would like to embed a YouTube video in my iPad app via the web overlay panel (is that even still possible since iOS8???).
The editorial design guideline requires the left bottom corner of the video to be rounded, the other corners are normal. Please see this picture for reference:
I tried several workarounds but nothing worked. Can somebody please tell me how I can play a Youtube video in the app (outside of the In-App Browser!) with that dolphin poster picture and the video playing inside the rounded-corner-frame?

Thanks Bob, that works great. I've heard somewhere that embedding Youtube videos does not work anymore with iOS8. Is that true?
Also, do you know an answer to this question (as it has been unanswered for a while): image sequence: pixelation of placeholder image

Similar Messages

Trouble With Rounded Corner Divs

Hi. This is the code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">.products_page_container {width:48%; background-color:#FFCCFF; margin-bottom:20px; }
#main .products_page_container p {color:#000000; padding:20px}
.float_left {float:left;}
.products_page_container .tl {background:url(images/ProductsContainerTL.gif) no-repeat top left; }
.products_page_container .tr {background:url(images/ProductsContainerTR.gif) no-repeat top right; }
.products_page_container .bl {background:url(images/ProductsContainerBL.gif) no-repeat bottom left; }
.products_page_container .br {background:url(images/ProductsContainerBR.gif) no-repeat bottom right; }</style>
</head>
<body>
<div class="products_page_container float_left ">
<div class="tr">
<div class="tl">
<div class="br">
<div class="bl">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis <strong>autem vel eum</strong> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <strong>sed diam nonummy nibh euismod tincidunt</strong> ut laoreet dolore magna aliquam erat volutpat. </p>
</div> </div></div></div></div>
</body>
the rounded corners appear inside the div as if theres some sort of top and bottom padding. If i remove p tags the rounded corner box works...but then there are paragraph tags for my text. am I missing something here? Thanks.
also i should add that I have removed padding from p but still rounded corners appear inside div with background appearing above and below.

Hi
Try moving the divs for the rounded corners outside your product div.
An alternative solution would be to use the propriety browser rounded corners for FF and Safari and the jQuery rounded corners for IE.
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
PZ

How create EtchedBorder with round corner?

Hi,
does anybody have an idea, how to create an EtchedBorder (for a JPanel) with round corners?
Thx.
Hans

did you check the source of the EtchedBorder ?
you can create an round button that paints the same
just .. with round corners
here an example for RoundBorder
http://examples.oreilly.com/jswing2/code/ch13/CurvedBorder.java

Web Overlay content - lock?

Hi-
Love DPS. Have a question when I bring in a web overlay with html5 content (not adobe edge based). It seems that that content can be moved around within the frame window. Is it possible to lock it in position so that when a user interacts with it - it can't pan around within the frame?
The div size on the html and the frame size in INDesign are the same pixel width/height. Also - I have
overflow:hidden;
on the container div.
Thanks for any insights...
Shawna

I think we might have found something - this meta string helped:
<meta name="viewport" content="width=440, initial-scale=1, maximum-scale=1 user-scalable=no">
Our frame in the folio is the fixed width above, 440.
Hope that helps!

(CSS) Rounded corner divs with shadows...

Hi,
It appears that with IE9, it's now safe to use CSS-generated rounded corner divs.
What about rounded corner divs with shadows?
Is this now do-able? (and by do-able, I mean viewable in IE9 and FF4)
Thanks!

Most modern browsers support CSS Border-Radius. However, you will need some webkit and mozilla specific rules for Firefox 3, Safari/Chrome.
BORDER-RADIUS
#Your-Div-Name{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/**NOTICE THE SYNTAX DIFFERENCES FOR MOZILLA**/
#Complex-Borders {
background: #FFF;
color: #000;
border: 9px solid red;
/**MOZILLA**/
-moz-border-radius-topright: 55px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 22px;
/**WEBKIT**/
-webkit-border-top-right-radius: 55px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:22px;
/**OPERA, OTHERS**/
border-top-right-radius: 55px;
border-bottom-right-radius: 8px;
border-bottom-left-radius:0;
border-top-left-radius:22px;
BOX-SHADOWS:
#Your-Div-Name {
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Box with rounded corners displays as rectangle in Web Browser

I am using the box control (IBoxObject) in my Crystal Reports with rounded corners. However the box displays as a rectangle with square corners when viewed in a web browser. I have tried this in IE 7.0.5730.13, Firefox 3.0.3 and Chrome 0.2.149.30 all give the same problem.
The interesting thing is that the boxes display correctly at design time and when exported to PDF, but they wonu2019t display correctly in IE/Firefox/Chrome. Here are the specific settings for the box:
                CornerEllipseHieght = 375
                CornerEllipseWidth = 375
                Crystal Reports Version 10.5.3700.0
I have also attached an image to try and clarify the problem.
[Picture showing Box at design time, in a Web browser and when exported to PDF|http://i38.tinypic.com/10p6k1v.jpg]
Thanks in advance for any help with this issue.
-John

Thank you Ted, this was my take on the problem but it is good to have a confirmation.
There are CSS (HTML) solutions for creating boxes with rounded corners, such as [SpiffyBox|http://www.spiffybox.com/] and [CSS Rounded Box Generator|http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en] and many more that can be found using [Google|http://www.google.com/search?hl=en&q=cssboxeswithroundedcorners&btnG=Google+Search&meta=].
Do you know of any plans to support rounded corners in the future?
Thanks for your help!
John

Rounded Corner Text Box in iWeb 2.0 - just like this site

As you can see on this very apple site the corners of its main boxes are rounded. In iWeb you can't make your text box rounded unless you place your text in a rounded corner shaped box. However for formatting purposes the shaped box won't expand or contract as you see your site on different browsers because it is saved as either an image.
1. If you place text directly in a shape it publishes as an image with the text not able to be highlighted or searched.
2. If you place a text box over a shape. The text will not adapt to the boundaries of the box. So if you view you site on the web it is possible for your text to go outside the boundaries of the box. This is not good.
3. I tried creating a rounded png box with transparency that I then made as the background image for a text box. The corners showed properly on iWeb but once published the rounded corners showed properly when there was no drop shadow applied to the text box. With a drop shadow the corner squared off to display some of the background corner. I know this is not the clearest -- forgive me.
4. You can add a picture frame to a text box which expands and contracts so why not simply be able to add a rounded corned picture frame to a text box.
Finally, the simple solution to me should be that the text box should be capable of being rounded. I know why iWeb doesn't do this because rounded corners are complex. I know because I've designed sites with Dreamweaver and GoLive.
I hope they add this to the iWeb in an update. You'd think they'd have a template similar to their own site which has rounded corners.

The rounded corners are images.
[TopLeft|http://discussions.apple.com/images/header.gif] & [Topright|http://discussions.apple.com/images/header_rightcap.gif]
[BottomLeft|http://discussions.apple.com/images/bottom.gif] & [Bottomright|http://discussions.apple.com/images/bottom_rightcap.gif]
You want prefab solutions.
Web design is also about finding solutions yourself. It's part of the creative process.
The textboxes are <div> elements in the final result. W3 CSS does not specify rounded corners, but [it is possible in CSS3|http://www.w3.org/TR/css3-background/#the-border-radius].
Safari supports the +-webkit-border-radius: 10px;+ style.
You can see it on [my custom webpage|http://myworld.webhop.org].
So, if you have the knowlegde, you can apply what you want with a HTML snippet.

AP Div with Rounded Corners

Hi All,
I want to draw an AP Div but I want it to have rounded corners. The reason being is that when I add a seperate background it will be more obvious and look better.
If anybody knows of a better way of adding a body of text with it's own background and rounded corners please can you let me know how to do it?
Many Thanks
Big_Gee

Wow Big_Gee! I think that's a Big_Question!
For a start, you can add rounded corners using CSS3 but it isn't widely supported accross all browsers. I don't think that DW will add those CSS rules but it won't take too much to find sample code on the web with a quick Google search on CSS Rounded Corners or something. Nancy O has recently responded to a rounded corner question here: http://forums.adobe.com/thread/657158?tstart=30. I don't konw if it makes a difference that you want the effect on AP Divs or not. I haven't read that you can't.
Adding a background image is achieved with CSS and you might be able to think about putting the rounded corners on the image in your graphics editor. That will depend partly on how flexible you site is and whether users can increase text size in the browser.
If you are using AP Divs (position: absolute) you need to be a bit cautious. General advice is to use them very sparingly and when other options don't achive what you want.
Martin

Creating a frame in CS5 with rounded corners

In porting CS4 to CS5, I have code that adds a frame with a rounded corner to the document.
My code is modeled after SnpGraphicHelper.
Well the problem is that only the upper-left corner is rounded. I've tried all the optional paramaters in Utils<IGraphicAttributeUtils>()->CreateCornerRadiusAttribute, and they all result with only the upper-left corner rounded. The other 3 corners are rectangular.
- IGraphicAttributeUtils::kLiveTopLeftCorner
- IGraphicAttributeUtils::kLiveTopRightCorner
- IGraphicAttributeUtils::kLiveBottomLeftCorner
- IGraphicAttributeUtils::kLiveBottomRightCorner
InterfacePtr<IGraphicAttrRealNumber> pCornerRadiusAttribute(Utils<IGraphicAttributeUtils>()->CreateCornerRadiusAttribute(cornerRadius));
if (pCornerRadiusAttribute)
pApplyMultAttributesCmdData->AddAnAttribute(pCornerRadiusAttribute);
I'm stumped...
Any ideas?

Norio,
Thank you so much for your help!
I simply added a CreateCornerImplementationAttribute for each corner and it worked.
Rick

Making a photo with rounded corners

I just followed both of these instructions to create rounded
corners on a rectangular image:
http://www.enghiong.com/how-to-make-rounded-corner-edges-using-fireworks.html/
http://www.joycejevans.com/tutorials/Fireworks/FWMX/roundecorners/rc_crn.htm
What am I missing? Both of them show the transparent canvas?
I drew the rectangle, rounded the corners, pasted inside and all
the other steps and saved it. When I use in my html file, the
background shows!
Any help with this is so appreciated.

quality11 wrote:
> Sure. Here's the orginal:
>
http://www.charlotteswebservices.com/images/ChildhoodPic.jpg
>
> And some that I've tried to make rounded corners:
>
http://www.charlotteswebservices.com/images/childhood-round-opt.jpg
>
http://www.charlotteswebservices.com/images/childhood-round.png
Here you go. It's usually a good idea to use a white rather
than black
object to paste inside of.
http://www.playingwithfire.com/childhood.html
Linda Rathgeber - Adobe Community Expert
http://www.adobe.com/communities/experts/members/8.html

Linking between different web overlays

Hi,
I'm working on a folio that has one article consisting of several pages with web overlays. Each overlay has the complete size of the the folio document (2048x1536px, optimized for iPad3), but the included html file is twice as wide (4096x1536px), so that the user can swipe horizontally within this overlay. This works fine. Now, is it possible in DPS to link from one html file in an overlay to a specific anchor of another html file in a web overlay (so that for example, the user can jump to the second half of the next page)? Maybe via Javascript, setting cookies etc. ("navto://" only navigates to a certain page)?
Any help would be great.
Thank you,
Alex

I've tried a whole bunch of things (setting variables, putting in links with an anchor reference ect.). Unfortunately, it seems you can't transfer any parameters from one web overlay to another.

Retna Renditions & Web Overlays

We have a problem with one of our issues currently in Newsstand when viewed on an iOS6 enabled iPad3. It's in a native folio (2048x1536) and has a full page HTML "scratch off" web overlay. The code uses native image assests. Just to let you know this particular page is at native dimensions too and not scaled up. Worked fine before but since iOS6 the web overlay (from top left) now appears 4 times larger cropping off 3/4's off the cover. We have an SD version (1024x768) of this folio in Newsstand and the "scratch off" web overlay works fine. The code for each of these is the same, the only difference is that one source file uses SD assets and the other uses HD. I'm at a loss here. It seems suspicious that the retina image is being amplifed to the power of 4 even when it's on a retina device!

Hi Mr Christian
yeah, def not iOS6 I've been having this error for many months, and it was initially quite hard to get Adobe to understand the problem. I noticed the problem most repeatably with a flip action (think of a coin flipping front to back) I was testing out alternate layouts so in one indesign doc had an SD and HD page for both iPad and iPhone, all assets were created specifically for the different devices. Any way the files were sent to Adobe and they have confirm the bug, and are looking into it.
For now I have just created the assets at a higher ppi and leave the folio size at the SD size, and for what I'm doing at the moment quality is OK. I had hoped that may be something would change with safari/webkit whatever in iOS6 and that would fix the problem, but from your results, obviously not!
Wouldn't it be good to have access to the bug list, so we can be kept up to speed with current issues!
P.S I am also seeing differences in web views between iOS5 and iOS6 but where the web view works perfectly in iOS6 but not in iOS5, this is one of my tilt html scripts in a web view. I think there could be inconsistencies with how well certain html scripts work in web views, especially if you think how inconsistent they are in Android

Can I edit the rounded corner preset in LR3, or how to make my own?

Although I'm pretty much a LR newbie, I think I understand how presets are created. But I can't figure out how the rounded corner presets were done. I would like to have a much deeper rounded corner and I've made them in PS with the rounded corner marquee tool.
But in LR3?
Is there a way to display the "contents" of a develop preset?
Robin in Short Pump

Is there a way to display the "contents" of a develop preset?
Yes, you can open it in a text editor. Right-click a preset in Develop and choose "Show in Explorer".
A rounded corner like this?
Set Feather to 0. Adjust Roundness for radius and Midpoint for inset amount.

Refresh Webi report with merged cells in crosstab in PowerPoint

Hello,
I have created a Webi report with a crosstab. In this crosstab I have merged some cells in the top left corner and inserted a title for the crosstab. Now I want to import the crosstab in PowerPoint with Live Office. The problem is, that after the import in PowerPoint the cells are not merged anymore. So I merged them manually. When I refresh the crosstab, the cells are still merged in PowerPoint, but they are empty.
Any ideas how to solve this issue?
Uwe

Hello,
I have created a Webi report with a crosstab. In this crosstab I have merged some cells in the top left corner and inserted a title for the crosstab. Now I want to import the crosstab in PowerPoint with Live Office. The problem is, that after the import in PowerPoint the cells are not merged anymore. So I merged them manually. When I refresh the crosstab, the cells are still merged in PowerPoint, but they are empty.
Any ideas how to solve this issue?
Uwe

Create shape with round and square corners

Hi all
I haven't used illustrator for a while so I'm really stuck on soemthing that should be simple.
I want to create a shape that has round corners on the bottom and square cormers at the top.
I have created two shapes, one with round corners and one with square one.
I was hoping to put them together then use the pathfinder to unite them but this then make the round corner square.
Is it possible to unite shapes with different corners.

myttmt,
Or create a rounded rectangle that is one corner radius too high, press C (Scissors Tool) and cut at the top of the straight sides (first right then left), press V to switch to the Selection Tool and delete the selected top cut, then select the remaining part and Ctrl/Cmd+J to join.
The bottom rounded rectangle thread lives. Or is it the tanker cross section thread?

Web Overlay with rounded corner

Similar Messages

Maybe you are looking for