Tap the technical and computer knowledge of other experienced users. Find information on computers and technological topics.

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

    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:


    Click image for larger version

Name:	Videos.jpg
Views:	1
Size:	130.0 KB
ID:	11765



    First I created two static html modules. You probably will need to replace the widget id number with yours.

    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>
    Then in additional_css I added 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;
        }} 
Working...
X
Articles - News - SiteMap