Can't add youtube with bootstrap

[startong21]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js

📋 Steps to reproduce

1. I use the following Bootstrap CDN(http://getbootstrap.com/)'s CSS, JS, Popper.js, and jQuery. This is default links in Bootstrap CDN.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity_no="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity_no="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity_no="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

I can't add any youtube videos on CKEditor5 editor.

2. If I remove the bootstrap.min.css from my site source, I can add youtube videos.

✅ Expected result

youtube video

❎ Actual result

no video

📃 Other details that might be useful

[Reinmar]

Hi! Could you create a sample on e.g. JSFiddle on which we could reproduce this issue?

[programad]

I am having this problem too. Confirmed not working with bootstrap 4.1.3

Looks like both ckeditor and bootstrap4 use the class .media. Bootstrap sets it to display:flex. Overriting it with display:block fixes the problem (maybe)

[Reinmar]

See #1391 (comment). Apparently Bootstrap sets some styles for .media which breaks the media widgets in CKEditor 5. If you'd style .ck-content .media { height: (not sure what here) }, the problem should be resolved.

cc @oleq

[programad]

@Reinmar display:block works too.

[dkonopka]

Yes, it's true bootstrap 4 overwrites .media class.

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_media.scss#L1-L4

ATM it's easy to fix it with with stronger CSS Specificity:

.ck-content .media {
  display: block;
}

Anyways we could introduce this fix by default in our ckeditor5-media-embed CSS.

[startong21]

Thank you!

[linucle]

In my webpage doesn't work...

<figure class="media"><oembed url="https://www.youtube.com/watch?v=H08tGjXNHO4"></oembed></figure>

we can't see the movie. (by this tag)