Jump to content

The Protestant Community

Welcome to Christforums the Protestant Community. You'll need to register in order to post your comments on your favorite topics and subjects. You'll also enjoy sharing media across multiple platforms. We hope you enjoy your fellowship here! God bless, Christforums' Staff
Register now

Christforums

Christforums is a Protestant Christian forum, open to Bible- believing Christians such as Presbyterians, Lutherans, Reformed, Baptists, Church of Christ members, Pentecostals, Anglicans. Methodists, Charismatics, or any other conservative, Nicene- derived Christian Church. We do not solicit cultists of any kind, including Mormons, Jehovah's Witnesses, Eastern Lightning, Falun Gong, Unification Church, Aum Shinrikyo, Christian Scientists or any other non- Nicene, non- Biblical heresy. God bless, Christforums' Staff
Register now
Sign in to follow this  
William

Vbulletin 5 How to create fluid width Video modules Horizonatal Aligned

Recommended Posts

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:

 

 

[ATTACH=CONFIG]n11765[/ATTACH]

 

 

 

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

 

Video Module 1:

 

   
   

 

Video Module 2:

 

   
   

 

Then in additional_css I added the following:

 

.videoWrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 10px;
   height: 0;
}

.videoWrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
div#widget_238.b-module.canvas-widget.default-widget.custom-html-widget {
   width: 50%;
   height: 100%;
   border:thick solid #1C4F70 !important;
   }

.videoWrapper2 {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 10px;
   height: 0;
}

.videoWrapper2 iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
div#widget_239.b-module.canvas-widget.default-widget.custom-html-widget {
   width: 50%;
   height: 100%;
   border:thick solid #1C4F70 !important;
   }

 

 

 

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

 

 

@media screen and (max-width: 667px) {
   div#widget_238.b-module.canvas-widget.default-widget.custom-html-widget {
   display:none;
   }}
@media screen and (max-width: 667px) {
   div#widget_239.b-module.canvas-widget.default-widget.custom-html-widget {
   display:none;
   }}

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×