video is not displayed using MDB5 on humhub

Topic: video is not displayed using MDB5 on humhub

ArtUnion free asked 2 years ago

Expected behavior Hi I'm using MDB modal video on my web site based on Humhub. There an examle: https://www.artunion.com/php-pages/global_pages/test.php

Actual behavior when I call this fucntion via my website, video is not displayed you can try here https://www.artunion.com/p/test

Resources (screenshots, code snippets etc.)

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

<p>Styles from stylesheet linked from below declaration are overwriting your modal styles, so it's invisible:</p>

<p>Because it gives your modal style of <code>opacity: 0;</code> from file <code>/assets/7c543ee/css/less/component-animations.less</code>, exactly this fragment:</p>

<pre class="prettyprint"><code>.fade {
  opacity: 0;
  .transition(opacity .15s linear);

&.in {
    opacity: 1;
  }
}
</code></pre>

<p>You can delete that to troubleshoot (if you are using MDB already, appending other ui kits or styling libraries may break some of your styles. It just happened with modal).If you want to stick with your actual imports, you can brute-force it with adding inline style of <code>opacity: 1;</code> to your MDB Modal:</p>

Please insert min. 20 characters.

Styles from stylesheet linked from below declaration are overwriting your modal styles, so it's invisible:

<link href="/assets/7c543ee/css/bootstrap.css?v=1.8.0" rel="stylesheet">

Because it gives your modal style of opacity: 0; from file /assets/7c543ee/css/less/component-animations.less, exactly this fragment:

.fade {
  opacity: 0;
  .transition(opacity .15s linear);

  &.in {
    opacity: 1;
  }
}

You can delete that to troubleshoot (if you are using MDB already, appending other ui kits or styling libraries may break some of your styles. It just happened with modal).If you want to stick with your actual imports, you can brute-force it with adding inline style of opacity: 1; to your MDB Modal:

<div class="modal fade" id="modalYT" tabindex="-1" aria-labelledby="myModalLabel" style="display: none; opacity: 1;" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <!--Content-->
            ...

ArtUnion free commented 2 years ago

It seems working, but bouton close is not working and myStyle are not correct: pls see :

before https://www.artunion.com/php-pages/global_pages/before.png

after https://www.artunion.com/php-pages/global_pages/after.png

Michał Duszak staff commented 2 years ago

What action did you perform on the website that caused this? You deleted the whole stylesheet which I mentioned earlier?

ArtUnion free commented 2 years ago

no, I didn't delete style I just add line you mentionned in your post

link tou reach me url is https://www.artunion.com/p/test

Michał Duszak staff commented 2 years ago

I can't see any of the tabs from the screenshots. Here is what I see in https://www.artunion.com/p/test - https://i.imgur.com/gomuH9K.png

Michał Duszak staff commented 2 years ago

What is your browser?

ArtUnion free commented 2 years ago

I'm using chrome browser

Michał Duszak staff commented 2 years ago

I still can't see those tabs. Libraries which you append into your projects may be causing bad interference with MDB. For example the bootstrap.css which I told you above injects modified bootstrap v 2.0.3 from 10 years ago.

ArtUnion free commented 2 years ago

that means I cannot use MDB in my project ?

ArtUnion free commented 2 years ago

that means I cannot use MDB in my project ?

ArtUnion free commented 2 years ago

may I ask you your reply ? pls

Michał Duszak staff commented 2 years ago

You can use MDB in your project. You have outdated libraries in your project that overwrite some of MDB functionalities. For example, the file that I mentioned above, and overwrite of .fade class and its opacity.

ArtUnion free commented 2 years ago

sorry Michal it is not clear for me. can you send me an example pls

my url is https://www.artunion.com/p/test

Michał Duszak staff commented 2 years ago

As I can see now, modals work fine. Do you experience any other technical issues related to MDB?

Michał Duszak staff commented 2 years ago

According to not working close button - change data-dismiss attribute to data-mdb-dismiss.

ArtUnion free commented 2 years ago

thank you

what about before https://www.artunion.com/php-pages/global_pages/before.png

after https://www.artunion.com/php-pages/global_pages/after.png

Michał Duszak staff commented 2 years ago

In the URL you provided, I don't experience such errors that you've shown in the screenshots. Is this issue related to the MDB product? Could you recreate this behaviour in a snippet? https://mdbootstrap.com/snippets/

Add comment

Michał Duszak staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,

first of all please install MDB according to our tutorial: https://mdbootstrap.com/docs/standard/pro/installation/

It will solve CORS blocking issue.

Second of all you have to remove aria-hidden="true" attribute from your modal content, and change data attributes to data-mdb atttributes. For example: data-mdb-toggle="modal" data-mdb-target="#modalYT"

Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3701409#html-tab-view

ArtUnion free commented 2 years ago

Hello

I started from you installation but it doens't work.

pls see my test https://www.artunion.com/p/test

direct link is https://www.artunion.com/php-pages/global_pages/test.php

Add comment