Skip to content

Test of youtube embeds

Solved Configure
14 5 4.6k 1
  • @Panda said in Test of youtube embeds:

    could you remind me please?

    You’ll need to get a CLI session to your server and from the directory where nodebb is installed, run

    npm install nodebb-plugin-ns-embed
    

    Then activate the plugin in the usual manner and rebuild

    wrote on last edited by
    #4

    @phenomlab Do you need to be in the plugins folder to run that, or does it automatically install the plugin into the plugins folder?

  • @phenomlab Do you need to be in the plugins folder to run that, or does it automatically install the plugin into the plugins folder?

    wrote on last edited by
    #5

    @Madchatthew no, you just need to be in NodeBB root

  • Panda Panda has marked this topic as solved on
  • wrote on last edited by Sampo2910
    #6

    This is a nice embed plugin but…the size of the embed is very small. I used one in the past that was bigger but cannot remember which one 🙂

    96177f2a-7d81-46f7-8acd-31a399630bfd-image.png

  • This is a nice embed plugin but…the size of the embed is very small. I used one in the past that was bigger but cannot remember which one 🙂

    96177f2a-7d81-46f7-8acd-31a399630bfd-image.png

    wrote on last edited by
    #7

    @Sampo2910 nothing that CSS can’t fix 😀

  • @Sampo2910 nothing that CSS can’t fix 😀

    wrote on last edited by
    #8

    @phenomlab I have the exact same issue.

  • @Sampo2910 nothing that CSS can’t fix 😀

    wrote on last edited by
    #9

    @phenomlab Can you enlighten me with some please 🙂

    Not in my skill set. 😁

  • @phenomlab Can you enlighten me with some please 🙂

    Not in my skill set. 😁

    wrote on last edited by
    #10

    @Sampo2910 @jac you just need to target the iframe itself (be aware that this will affect all other iframes, so you may want to be more specific if need be). Something like this will work - just play with the height and width values to get the desired result.

    iframe {
        height: 400px;
        width: 400px;
    }
    
  • @Sampo2910 @jac you just need to target the iframe itself (be aware that this will affect all other iframes, so you may want to be more specific if need be). Something like this will work - just play with the height and width values to get the desired result.

    iframe {
        height: 400px;
        width: 400px;
    }
    
    wrote on last edited by
    #11

    @phenomlab Perfect …Thank you.

  • @Sampo2910 @jac you just need to target the iframe itself (be aware that this will affect all other iframes, so you may want to be more specific if need be). Something like this will work - just play with the height and width values to get the desired result.

    iframe {
        height: 400px;
        width: 400px;
    }
    
    wrote on last edited by
    #12

    @phenomlab said in Test of youtube embeds:

    be aware that this will affect all other iframes, so you may want to be more specific

    Is there a way that we can only be specific to this embed?

  • @phenomlab said in Test of youtube embeds:

    be aware that this will affect all other iframes, so you may want to be more specific

    Is there a way that we can only be specific to this embed?

    wrote on last edited by phenomlab
    #13

    @Sampo2910 yes, you could try

    iframe[src*="youtube"] {
        height: 400px;
        width: 400px;
    }
    

    This is of course an example that looks for “youtube” in the src string. You’d need to adapt it as necessary. The only other way possible here would be to assign a div ID to the container but that would require a change to the underlying plugin code.

    If you need to apply this to mobile only views, it’ll be to be

    @media (max-width: 767px) {
        iframe {
            height: 370px;
            width: 360px !important;
        }
    }
    
  • @Sampo2910 yes, you could try

    iframe[src*="youtube"] {
        height: 400px;
        width: 400px;
    }
    

    This is of course an example that looks for “youtube” in the src string. You’d need to adapt it as necessary. The only other way possible here would be to assign a div ID to the container but that would require a change to the underlying plugin code.

    If you need to apply this to mobile only views, it’ll be to be

    @media (max-width: 767px) {
        iframe {
            height: 370px;
            width: 360px !important;
        }
    }
    
    wrote on last edited by
    #14

    @phenomlab Perfect!!! Many thanks.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Pulling YouTube videos using RSS

    Configure rss youtube rsshub
    5
    7
    6 Votes
    5 Posts
    2k Views
    JAC
    The perfect solution and walkthrough Mark, appreciated as always!
  • nodebb error logs

    Bugs nodebb
    6
    2
    4 Votes
    6 Posts
    2k Views
    ahmed
    I just wanted to ask because I don’t have much knowledge about the new installation. Thank you for the explanatory answer.
  • Custom html in nodebb to prevent cache

    Unsolved Configure nodebb
    18
    2 Votes
    18 Posts
    5k Views
    phenomlab
    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this [image: d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png] The colour choice is still really hard on the eye, but at least you can now read the text
  • Nodebb 3.2.0

    Bugs nodebb nodebb 3.2.0
    20
    1
    2 Votes
    20 Posts
    7k Views
    phenomlab
    @crazycells yes, I’m aware of that. Need to fix EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • nodebb loading emojis

    Solved Configure nodebb emojis
    16
    1
    1 Votes
    16 Posts
    6k Views
    phenomlab
    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version. You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.
  • Post Style View

    Solved Customisation post style sudonix nodebb
    67
    2
    18 Votes
    67 Posts
    35k Views
    DownPW
    @cagatay Just add margin-left on the element like @phenomlab said to you : topic [component="post/parent"] { margin-left: 10px; } [image: aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png] Maybe @phenomlab have a better way
  • NodeBB slow after DB recovery

    Solved Performance performance nodebb
    1
    5 Votes
    1 Posts
    967 Views
    No one has replied