Skip to content

Test of youtube embeds

Solved Configure
14 5 4.6k 1
  • Hope its ok to do a test here of how Sudonix does youtube embeds, as I think this side uses the ns plugin.
    From my recall, ns has better functionality than the currently recommeded plugin.
    I dont know why the ns plugin isnt whitelisted?
    @phenomlab, out of interest, do you know who coded the ns plugin?

    For this test, I picked a slightly relevant video!
    Test1: a youtu.be link

    wrote on last edited by
    #2

    Ok that test worked so ns can embed even the unusual shortened youtube links.

    Ive forgotten how to instal plugins on the server, as its not whitelisted will need to do it that way.
    @phenomlab could you remind me please?

  • Ok that test worked so ns can embed even the unusual shortened youtube links.

    Ive forgotten how to instal plugins on the server, as its not whitelisted will need to do it that way.
    @phenomlab could you remind me please?

    wrote on last edited by
    #3

    @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

  • @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
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • 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!
  • MogoDB v6 to v7 upgrade

    Solved Configure nodebb
    5
    1 Votes
    5 Posts
    2k Views
    phenomlab
    @Panda if you used the Ubuntu PPA, I think this only goes as far as 6.x if I recall correctly.
  • NodeBB: Consent page

    Solved Configure nodebb consent
    16
    4 Votes
    16 Posts
    6k Views
    phenomlab
    @DownPW I still do not see any issues.
  • Upgrade Problem from 2.8.3 to 2.8.4

    Solved Configure nodebb
    35
    1
    8 Votes
    35 Posts
    12k Views
    phenomlab
    @cagatay No, you can ignore that.
  • Podcast Share NodeBB

    Solved Configure podcast nodebb
    15
    4 Votes
    15 Posts
    5k Views
    phenomlab
    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.
  • Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.