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
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    6k Views
    phenomlab
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • 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!
  • Further Widgets question

    Solved Configure nodebb
    4
    1
    1 Votes
    4 Posts
    2k Views
    phenomlab
    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.
  • NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    4k Views
    mventures
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • Chevron up before & after

    Solved Configure nodebb
    11
    1
    4 Votes
    11 Posts
    3k Views
    cagatay
    @crazycells you are right thank you.
  • How to fix size of photos & videos NodeBB

    Solved Customisation nodebb nodebb size
    7
    3 Votes
    7 Posts
    3k Views
    phenomlab
    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt https://stackoverflow.com/questions/609517/why-em-instead-of-px
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.