Can't vertical center amp-facebook inside amp-carousel

[kul3r4]

Short description of your issue:

Can't vertical center amp-facebook inside amp-carousel.

How do we reproduce the issue?

I created an example here:
http://js.do/code/88222
then I tried to apply a class to the component, like here:
http://js.do/code/88223
but any style for positioning gets overridden by the AMP framework when the iframe is generated.

What browsers are affected?

Only verified on Chrome

Which AMP version is affected?

Is this a new issue? Or was it always broken? Paste your AMP version. You can find it in the browser dev tools.

1457721872758

@sebastianbenz

[dvoytenko]

@kul3r4 You should be able to center an embed by putting it inside of a div and using flex layout.

[kul3r4]

Hi,
thanks for the suggestion.
I tried the solution using flex, but the AMP runtime is overwriting the layout, so even if I add layout:flex to a container div,
<div class="container">
where container is:
.container { display: flex; }
when the page gets rendered, it will become something like:
<div class="container -amp-fill-content" style="display: block; z-index: 0; opacity: 1;">

You can find this experiment here:
http://js.do/code/88408

[dvoytenko]

It's ok because you can still nest the div inside with flex layout. Right?

[kul3r4]

Thanks Dima,
adding another div did the trick, so now the example looks something like this:

<amp carousel ...>
<div>
      <div class="container">
      <amp-facebook
                      class="child"
                      width="552" height="574"
                      layout="responsive"
                      data-embed-as="video"
                      data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
      </amp-facebook>
    </div>
  </div>
.....

where the css classes are:

.container {
      display: flex;
      flex-flow: column;
      justify-content: center;
      height: 100%;
    }
    .child {
      width: 100%;
      height: 55%;
    }

It is still somehow strange doing all of this while other video components, like amp-youtube or amp-video are centering automatically inside a carousel.

[dvoytenko]

@kul3r4 Yeah. Replaced content is a lot easier to center - CSS is taking a special care of those content types.

[adelinamart]

Hey,

The AMP community has been working nonstop to make AMP better, but somehow we've still managed to grow an enormous backlog of open issues. This has made it difficult for the community to prioritize what we should work on next.

A new process is on the way and to give it a chance for success we will be closing issues that have not been updated in awhile.

If this issue still requires further attention, simply reopen it. Please try to reproduce it with the latest version to ensure it gets proper attention!

We really appreciate the contribution! Thank you for bearing with us as we drag ourselves out of the issue abyss. :)