Skip to content

Test of youtube embeds

Solved Configure
14 5 4.6k 1
  • wrote on last edited by
    #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

  • 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
  • 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!
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    15k Views
    phenomlab
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • Sidebar Widget is no longer on the side!

    Moved Solved General nodebb
    4
    2
    2 Votes
    4 Posts
    1k Views
    phenomlab
    @Panda said in Sidebar Widget is no longer on the side!: Ah, so sidebar wont work on mobile? Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system https://getbootstrap.com/docs/5.0/layout/grid/ What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.
  • Interesting Widget code, but can't fetch API

    Solved Customisation nodebb
    26
    2 Votes
    26 Posts
    11k Views
    phenomlab
    @Panda said in Interesting Widget code, but can’t fetch API: How did you drop that widget into the post there? I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already? Yes, here https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044 It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets. @Panda said in Interesting Widget code, but can’t fetch API: Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that? By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget. Hope this makes sense?
  • Collapsing blockquotes on Harmony

    General nodebb harmony collapsible quotes
    2
    1
    2 Votes
    2 Posts
    980 Views
    phenomlab
    @dave1904 that’s a really good point actually. I know it was there previously on Persona, but you’re right - no such function exists on harmony. However, putting something in place to mimick the behaviour of Persona won’t be hard from the js standpoint, although I wonder if perhaps we should ask the NodeBB developers is this feature was overlooked?
  • what does sound/mute button do?

    Solved Customisation nodebb
    20
    1
    9 Votes
    20 Posts
    6k Views
    phenomlab
    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit [image: 3d6dbc10-185b-4102-9470-0c2731a10750-image.png] I’ll probably remove that… eventually…
  • NodeBB vs Discourse

    Chitchat nodebb discourse board
    25
    6 Votes
    25 Posts
    14k Views
    RiekMedia
    @phenomlab said in NodeBB vs Discourse: Hetzner eh ? I use them also. In fact, Sudonix is hosted in Nuremberg yes i’m also at hetzner, i have been a customer there for years with a reseller account for domains. My VPS that I host there are also in Nuremberg