Announcement

Collapse
No announcement yet.

Vbulletin 5 How to create fluid width Video modules Horizonatal Aligned

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Vbulletin 5 How to create fluid width Video modules Horizonatal Aligned

    Note: I got this code from multiple sources but can't remember from where because it was so long ago.

    As you can see in our forum I created two fluid width video modules. They were created site builder vertically on top of one another: https://www.christforums.org



    First I created two static html modules. And the Youtube address needs be the embed address.

    Video Module 1:

    Code:
    You need to be logged in to view the code. Login or Register now!
    Video Module 2:

    Code:
    You need to be logged in to view the code. Login or Register now!
    You probably will need to replace the widget id number with yours. Then in additional_css add the following:

    PHP Code:
    You need to be logged in to view the code. Login or Register now!


    And the following to additonal_css to keep the videos from displaying on small screen sizes:


    PHP Code:
    You need to be logged in to view the code. Login or Register now!
    Enjoy,
    William
    Christian Forums

  • #2
    Thanks for sharing William.

    But why didn't you use the Video module? And the "Show module at these screen sizes" module option to hide the module on mobile?

    The benefit of using the Video Module is if you are embedding a YouTube video (or other supported video providers), it will not load the external video URL on your page right away. It will only load the video thumbnail and only when you clicked the thumbnail will the actual video URL be requested and loaded on the page. This has page load performance benefit as the video URL will only be loaded on demand not every time the page is loaded. So if no one played the video, no video URL will be loaded on the page. This is the same behavior when embedding a video in a post.

    Comment


    • William
      William commented
      Editing a comment
      I'll give that a shot by tomorrow. I have been up for over 24 hours

    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Get a sleep 💤

  • #3
    I just added a Video module on homepage. It would have been nice if there was a module option to display the video title and description similar to what it does when a video is embedded in a post.

    Comment


    • #4
      I need a little help. I got the videos on but I'm confused about the css to make them horizontal.
      Christian Forums

      Comment


      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Will check after my lunch break. 🍱

    • #5
      Please disregard. I think I got it:

      Code:
      You need to be logged in to view the code. Login or Register now!
      The issue I am having is that the video size enlarges when it plays.
      Christian Forums

      Comment


      • #6
        In your video player Glenn on this site when pushing play the video size increases. Can this be stopped?
        Christian Forums

        Comment


        • #7
          Add this CSS:

          Code:
          You need to be logged in to view the code. Login or Register now!
          I prefixed the CSS selectors with the widget id specific to the video modules you are using to prevent it from being applied to embedded videos in posts.

          Comment


          • glennrocksvb
            glennrocksvb commented
            Editing a comment
            Just applied the same code here for the video on homepage.
        Working...
        X