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

Christian Fellowship

John Calvin puts forward a very simple reason why love is the greatest gift: “Because faith and hope are our own: love is diffused among others.” In other words, faith and hope benefit the possessor, but love always benefits another. In John 13:34–35 Jesus says, “A new command I give you: Love one another. As I have loved you, so you must love one another. By this everyone will know that you are my disciples, if you love one another.” Love always requires an “other” as an object; love cannot remain within itself, and that is part of what makes love the greatest gift.
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 - Privacy Policy