Jump to content

The Protestant Community

Sincerely inquiring about the Protestant faith? Welcome to Christforums the Christian Protestant community forums. 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

Christian Fellowship Community Forums

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

Staff

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...