How do I add Videos to my forum Side Bar?

  • Affected Version
    WoltLab Suite 3.0

    I need help on how to upload a Video/s onto my Side Bar in the Dashboard Section and/or Forum Main Page.

    I had this choice / feature set-up and working when I had forum software Woltlab Version 4.x.x, but that was about 1 year ago and now I have

    Woltlab Core Suite 3.0.3 installed on a new website. Unfortunately I forgot how to set up Video presentations on the Sidebar!

    Can someone tell me / show me how to do this?:)

    DJ

  • You can simply add a new box, and use text for it.

    Then simply add the link of youtube and it should display the video.

    OK, I made the Box; but instead of the Video displaying in the Box, there is the Video html Code showing.

    Here is what I have done thus far:

    Established Box, Named it, and in CONTENT I put in the Video Embed Code I have for a Music Video I want to play in the Side Bar;

    so I pasted in the Video Code I have for this Video I want to play (in the Content Box) and I clicked on the "code" symbol -

    where all the different choices are located. Then clicked on "Submit".

    That gives me the Side Bar, but code text appears, NOT the video itself.

    Also: Which of these am I supposed to check in the LINK section ?: NONE - Internal Link - External Link. "None" is currently checked.

    And for those areas I DO NOT want the Side Bar Video Box showing, I am to select that from the section:

    "Pages Box will be explicitly hidden" - correct?

    And, currently, the Check Box that says "Visible Everyone", is ticked. That means Members, Guests, Admin, Everyone - correct?

    So if I only want MEMBERS to view the Video, do I UNCHECK this box? And what else should I do?

  • UPDATE: Uploading Videos on Forum Side Bar

    I did eventually figure it out!

    When I get onto something like this I can't stop until either I work it out, OR someone like you Throwholics,

    shows me how. SEE attachment.

    But I am not finished. I have to RESIZE the SIDE BAR - because as you can see in the Screen Shot,

    the Video does not properly display as to SIZE.

    I have CSS Code (retrieved from an answer to a question I had about Resizing); it is on Woltlab Forum of a a year ago or so.

    I just hope I can remember WHERE to put that code! But right now going to take a break ....

    DJ

    2nd UPDATE:

    Will this CSS Code work with Woltlab Suite 3.0.3 ? (See attachment)

    I ask because originally this code was used on Woltlab Forum Version 4.x.x

  • Glad you figured it out, I went to bed before you replied.

    One only has to type in the link of the video instead of the embedded code string from YouTube.

    For the css restrictions I am not sure, not my cup of a tea :)

    norse might be able to help out?

    Thanks for your help and replies!

    Thought perhaps I should wait before typing in the CSS Code Changes for the Side Bar Size. I certainly do not want to mess

    everything up! The CSS code for re-sizing the Side Bar worked with 4.x.x but that doesn't necessarily mean it will work with

    Woltlab Suite 3.0.3

    I will try your suggestion and contact "norse"

    DJ

  • He will. Most likely read it and I would have to invite him for a beer again cause I force him to write in English :)

    Haven't heard from "norse" - perhaps he is very busy and doesn't have the time to answer this issue about the Side Bar re-sizing Code.

    Wondering if I should contact Woltlab Support???

  • There is a built-in class called videoContainer that you can use, wrap the iframe of the YouTube media provider in a div with that class:

    HTML
    <div class="videoContainer">
        <iframe style="max-width:100%;" width="560" height="315" src="https://www.youtube.com/embed/{$ID}?wmode=transparent&amp;start={$start}" allowfullscreen></iframe>
    </div>


    My styles and plugins in the Plugin-Store.

    Display Spoiler

    — ¡Carajo! —gritó

    Amaranta, que empezaba a meter la ropa en el baúl, creyó que la había picado un alacrán.

    — ¿Dónde está? —preguntó alarmada.

    —¿Qué?

    — ¡El animal!

    Úrsula se puso un dedo en el corazón.

    — Aquí —dijo.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • There is a built-in class called videoContainer that you can use, wrap the iframe of the YouTube media provider in a div with that class:

    HTML
    <div class="videoContainer">
        <iframe style="max-width:100%;" width="560" height="315" src="https://www.youtube.com/embed/{$ID}?wmode=transparent&amp;start={$start}" allowfullscreen></iframe>
    </div>


    Thanks for your input; but what I want is to re-size the Side Bar Area.

    I have CSS Code for doing just that - but my question is can I safely use it now that I am using Woltlab Core 3.0.3 instead of the older

    version of Woltlab Forum Software 4.x.x ?

    So I think I should contact Woltlab Support - as Throwholics suggested.

    DJ

  • That's the code used in WSC 3, I don't see why you couldn't use it. I think there's also a class, I don't remember the name, I'm not sure but I think is borderless, somewhere I read that you could apply to the sidebar to remove all padding and customize the sidebar as you want.

    My styles and plugins in the Plugin-Store.

    Display Spoiler

    — ¡Carajo! —gritó

    Amaranta, que empezaba a meter la ropa en el baúl, creyó que la había picado un alacrán.

    — ¿Dónde está? —preguntó alarmada.

    —¿Qué?

    — ¡El animal!

    Úrsula se puso un dedo en el corazón.

    — Aquí —dijo.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • That's the code used in WSC 3, I don't see why you couldn't use it. I think there's also a class, I don't remember the name, I'm not sure but I think is borderless, somewhere I read that you could apply to the sidebar to remove all padding and customize the sidebar as you want.

    Thanks again for info you've given to me!

    You are probably right - somewhere there is information stored on all these issues; the problem is locating it!

    As for the CSS Code I have, the easiest way would be to contact the person who gave me the CSS Code.

    Unfortunately it seems he no longer is an active member of Woltlab as I keyed in his name in the Search Bar and nothing came up.

    Anyway ... I opened a support ticket. Asked them if it was alright to use the Code; and gave a snap shot of it in the support ticket.

    DJ

  • Sorry I hadn't noticed the attachment with the code written by Black Rider, that code wouldn't be useful because the html structure changed. There's no more fieldsets in the sidebar but sections and instead of using those media queries you need to use the media breakpoints that you can find in the documentation. For example:

    CSS
    @include screen-md-up {
        // Your code for tablets (landscape) and desktop PC
    
    }

    My styles and plugins in the Plugin-Store.

    Display Spoiler

    — ¡Carajo! —gritó

    Amaranta, que empezaba a meter la ropa en el baúl, creyó que la había picado un alacrán.

    — ¿Dónde está? —preguntó alarmada.

    —¿Qué?

    — ¡El animal!

    Úrsula se puso un dedo en el corazón.

    — Aquí —dijo.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • Sorry I hadn't noticed the attachment with the code written by Black Rider, that code wouldn't be useful because the html structure changed. There's no more fieldsets in the sidebar but sections and instead of using those media queries you need to use the media breakpoints that you can find in the documentation. For example:

    CSS
    @include screen-md-up {
        // Your code for tablets (landscape) and desktop PC
    
    }

    Thanks for explaining this.

    So the code Black Rider made is useless now!

    I also have CSS code for changing font colors of Category / Forum Titles in Categories / Forums which I post.

    So is that CSS Code also useless?

    DJ

    UPDATE:

    Just a few minutes ago in going thru my correspondence with Andrea Berg (correspondence when I upgraded my license to

    Woltlab Core 3.0.3) I noticed she informed me I could use this CSS CODE with regard to Side Bar Video Presentation:

    .sidebar {



    flex: 0 0 310px;



    }


    Will this Code accomplish what I want (what I have previously explained to you) with regard to the re-sizing of the Side Bar?

    If so, in which box area do I type in this code she gave me? (there are two boxes which appear when logged into the

    CSS Code Section).

    DJ



  • This CSS code has to be added to the style.

    Login to ACP, go to your style and extra CSS declarations.

    Just add it to the bottom and it should work.

    Does NOT work. Put in CSS Code - nothing is changed regarding the Side Bar OR the Video I have uploaded

    onto the Side Bar.

    I tried putting in the CSS Code in both boxes (top and bottom) - together and separately.

    When CSS Code is inserted in the bottom box, an error message appears saying that each entry of code (each line of code)

    is "invalid" (and it names each line as being invalid).

    When I put in the CSS Code in the TOP box (of style change, Advanced Settings)

    and click on submit, it accepts the CSS Code.

    But going back to my Dashboard Page of the Forum (where I have the Video appear),

    it is readily apparent that NO change has taken place.

    I also cleared my cache, cookies, etc., on my computer thinking that might be the problem - still no change.

    And the CSS Code I put in is what I received this morning from Andrea Berg.

    DJ

    MORE INFO:

    I have tried changing the Width and Height data within the Video Code itself.

    All that does is SHIFT the visual portion of the Video - it doesn't permit the actual FULL visual of the Video.

    I ran into this problem when I had Woltlab 4.x.x.

    That is why Black Rider gave me the CSS Code that he did. And it solved the problem;

    it solved the problem BECAUSE his code actually EXPANDED the Side Bar - NOT the Video.

    That expansion enabled the Uploaded Video to be seen as it would be seen if one were viewing it from

    the original source.

    I even tried the Code Caribe_Soy gave me - see post #10.

    That also doesn't work or solve the problem.

    The bottom line is this:

    That Side Bar Area MUST be ENLARGED, otherwise any Video I upload there is not going to display as it should.

    DJ

    Please see my attachment I just uploaded

  • I will try this one more time: when I tried submitting a post here - with regard to the above subject matter - I got an error message

    and everything I had posted was deleted.

    I replied back to Andrea Berg regarding her reply to my Support Ticket relating to the Side Bar resizing issue.

    This is what she said:

    the code works for a resolution higher than 1025 pixel. In this case, the width is increased to 400 pixels instead of the default 325 pixels.
    If the width should also to be changed at smaller resolutions, then you must choose another breakpoint.

    She also included a LINK to information on CSS.

    In viewing that information, it became clear to me that this is out of my league.

    With regard to WHAT said said in her reply about "resolutions" - higher and smaller -

    HOW am I supposed to know WHAT the resolution is of any particular Video I upload to my forum?

    I am not aware of individuals or companies who have current Videos showing on the internet (and capable of being

    downloaded) provide any such information about their Video.

    As for the "break point" - that goes back to what I said above: This is clearly out of my league (expertise).

    So I guess the bottom line here is I will have to hire an independent Website Technician who is versed in CSS Coding.

    Woltlab Code 3.0.3 has many nice new features - in many ways an improvement over Woltlab 4.x.x

    However, when it comes to entering CSS Code to modify certain, specific areas of the Forum Software (such as re-sizing

    the Side Bar) it has gone a step backwards.

    DJ

  • Sorry I hadn't noticed the attachment with the code written by Black Rider, that code wouldn't be useful because the html structure changed. There's no more fieldsets in the sidebar but sections and instead of using those media queries you need to use the media breakpoints that you can find in the documentation. For example:

    CSS
    @include screen-md-up {
        // Your code for tablets (landscape) and desktop PC
    
    }

    TO: Caribe_Soy:

    You might be interested in this:

    I spoke with a person who is very well versed in CSS Coding; he told me the reason WHY the CSS Code I was given (by Andrea Berg of Woltlab)

    does not function for changing the Side Bar dimensions on my Forum is due to the fact the Code as given is INCOMPLETE!

    DJ

  • This CSS code has to be added to the style.

    Login to ACP, go to your style and extra CSS declarations.

    Just add it to the bottom and it should work.

    TO: Throwholices:

    You might be interested in this:


    I spoke with a person who is very well versed in CSS Coding; he told me the reason WHY the CSS Code I was given (by Andrea Berg of Woltlab)

    does not function for changing the Side Bar dimensions on my Forum is due to the fact the Code as given is INCOMPLETE!

    DJ

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!