Announcement

Collapse
No announcement yet.

Vbulletin 5 How to create fluid width Video modules Horizonatal Aligned

Collapse
X
Collapse
First Prev Next Last
 
  • 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:
    <div class="videoWrapper">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" src="https://www.youtube.com/embed/FkNA9RtAQL8" frameborder="0" allowfullscreen></iframe>
    </div>
    Video Module 2:

    Code:
    <div class="videoWrapper2">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" src="https://www.youtube.com/embed/FkNA9RtAQL8" frameborder="0" allowfullscreen></iframe>
    </div>
    You probably will need to replace the widget id number with yours. Then in additional_css add the following:

    PHP Code:
    .videoWrapper {
        
    positionrelative;
        
    padding-bottom56.25%; /* 16:9 */
        
    padding-top10px;
        
    height0;
    }

    .
    videoWrapper iframe {
        
    positionabsolute;
        
    top0;
        
    left0;
        
    width100%;
        
    height100%;
    }
    div#widget_238.b-module.canvas-widget.default-widget.custom-html-widget {
        
    width50%;
        
    height100%;
        
    border:thick solid #1C4F70 !important;
        
    }

    .
    videoWrapper2 {
        
    positionrelative;
        
    padding-bottom56.25%; /* 16:9 */
        
    padding-top10px;
        
    height0;
    }

    .
    videoWrapper2 iframe {
        
    positionabsolute;
        
    top0;
        
    left0;
        
    width100%;
        
    height100%;
    }
    div#widget_239.b-module.canvas-widget.default-widget.custom-html-widget {
        
    width50%;
        
    height100%;
        
    border:thick solid #1C4F70 !important;
        



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


    PHP Code:
    @media screen and (max-width667px) {
        
    div#widget_238.b-module.canvas-widget.default-widget.custom-html-widget {
        
    display:none;
        }}
    @
    media screen and (max-width667px) {
        
    div#widget_239.b-module.canvas-widget.default-widget.custom-html-widget {
        
    display:none;
        }} 
    Enjoy,
    William

    #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.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    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.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


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

      Comment


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

      #5
      Please disregard. I think I got it:

      Code:
      div#widget_393 {
      position: relative;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      border:thick solid #1C4F70 !important;
      }
      div#widget_394 {
      position: relative;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      border:thick solid #1C4F70 !important;
      }
      The issue I am having is that the video size enlarges when it plays.

      Comment


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

        Comment


          #7
          Add this CSS:

          Code:
          #widget_393 .videocontainer .restrain,
          #widget_394 .videocontainer .restrain {
              height: 260px;
          }
          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.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


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

        Users Viewing This Page

        Collapse

        There is 1 user viewing this forum topic.

        • Guest Guest

        Latest Posts

        Collapse

        Working...
        X
        Searching...Please wait.
        An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

        Please push the back button and reload the previous window.'
        An unexpected error was returned: 'Your submission could not be processed because the token has expired.

        Please push the back button and reload the previous window.'
        An internal error has occurred and the module cannot be displayed.
        There are no results that meet this criteria.
        Search Result for "|||"