Jump to content

The Protestant Community

Christian and Theologically Protestant? Or, sincerely inquiring about the Protestant faith? Welcome to Christforums the Christian Protestant community. You'll first need to register in order to join our community. Create or respond to threads on your favorite topics and subjects. Registration takes less than a minute, it's simple, fast, and free! Enjoy the fellowship! God bless, Christforums' Staff
Register now

Fenced Community

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.
Register now

Christforums

.... an orthodox (true and correct when contrasted with Liberal theology) Protestant forum whose members espouse the Apostolic doctrines in the Biblical theologies set forth by Augustine, Martin Luther, Ulrich Zwingli, John Calvin and John Knox etc. We do not "argue" with nor do we solicit the membership of people who espouse secular or cultic ideologies. We believe that our conversations are to be faith building and posts that advance heretical or apostate thinking will be immediately deleted and the poster permanently banned from the forum. This is a Christian community for people to explore the traditional theologies of Classical Protestantism. Those who would challenge the peace and harmony that we enjoy here as fellow believers are directed to another website.
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.

×
Articles - News