fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.55k stars 331 forks source link

Embed video into sidebar. #3063

Closed qroft closed 3 months ago

qroft commented 3 months ago

Bug Report

I want to embed a Youtube video into the sidebar. Neither the data-placeholder appears, nor the Video itself. The developer console just says that one object has an overflow, but that is all. If i copy the tag into the page itself, instead of the sidebar, the video embeds correctly.

Steps to reproduce

  1. Create a simple page with a sidebar.
  2. Use the embed code inside the sidebar.
  3. Open up the sidebar.

Expected result

The video should be embedded.

Actual result

A grey box appears.

Version

2.9.3

lubber-de commented 3 months ago

Cannot reproduce. See jsfiddle. toggle the sidebar and the embedded youtube video plays just fine. Please adjust the jsfiddle to match your code where it is not working. Thanks

https://jsfiddle.net/lubber/eb8vhszy/5/

image

qroft commented 3 months ago

Cannot reproduce. See jsfiddle. toggle the sidebar and the embedded youtube video plays just fine. Please adjust the jsfiddle to match your code where it is not working. Thanks

https://jsfiddle.net/lubber/eb8vhszy/5/

Ok, i found out that the problem is that i am dynamically loading the content. I am using Winter CMS where you can load via Ajax some content into a defined DIV. When i add the embed code "fixed" into the sidebar, it works without a problem. But as it is loaded via AJAX, the box stays grey.

I will keep on searching for a solution, if i find one, i will add it in here. If not i will have to keep the embeded videos statis and hide or show them, depending on which one to play.

Thanks a lot for your support.

qroft commented 3 months ago

SOLUTION:

As i mentioned i am working with Winter CMS and embed the embedded video dynamically into the sidebar. Using the "static" embed code and simply just changing the video-ID did not work. What i did now, was using the javascript call of the embed code at the end of the page and it works now. `

`