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
  • 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!
  • Custom badges

    Solved Customisation nodebb
    103
    2
    49 Votes
    103 Posts
    60k Views
    DownPW
    Perfect
  • 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.
  • NodeBB v3

    Announcements nodebb v3 nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • 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] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    3k Views
    JAC
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed