Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 11 Mar 2016, 18:43
shimei shimei is offline
 
Join Date: Feb 2015
Talking Fluid width youtube video modules

Hi,

I am pretty excited to share some additions to my forum. I created step by step instructions on how to create fluid modules for youtube videos using the html static modules and addtional_css. Here's the link: Vbulletin 5 How to create fluid width Video modules Horizonatal Aligned

And here's a screen shot of the video modules:

Reply With Quote
  #2  
Old 12 Mar 2016, 11:53
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Well done sir....

Is there a link where people can see them demonstrated?
Reply With Quote
  #3  
Old 12 Mar 2016, 21:04
shimei shimei is offline
 
Join Date: Feb 2015
Originally Posted by DemOnstar View Post
Well done sir....

Is there a link where people can see them demonstrated?
Yes, here: https://www.christforums.org

Enjoy and thanks for the compliment Demostar!
Reply With Quote
  #4  
Old 13 Mar 2016, 10:37
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Hello there. . .

They look and act great with the PC. However, have you tried viewing them using your mobile?
I try to view them through Chrome using developer tools and whilst all the other modules are displayed the 2 modules Youtube ones are not visible....
I also tried a full zoom on Firefox and they disappear...
Not sure if that is a good test or not but it would have me scratching my head. . .
Reply With Quote
  #5  
Old 13 Mar 2016, 13:02
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by DemOnstar View Post
Hello there. . .

They look and act great with the PC. However, have you tried viewing them using your mobile?
I try to view them through Chrome using developer tools and whilst all the other modules are displayed the 2 modules Youtube ones are not visible....
I also tried a full zoom on Firefox and they disappear...
Not sure if that is a good test or not but it would have me scratching my head. . .
There should be media queries for @media screen (min-width: 320px) and (max-width: 667px) which cause the following two IDs to use 100% of the container width for small screen mobile devices:

div#widget_224.b-module.canvas-widget.default-widget.custom-html-widget {
width: 50%;
height: 100%;
border:thick solid #1C4F70 !important;
}

div#widget_225.b-module.canvas-widget.default-widget.custom-html-widget {
width: 50%;
height: 100%;
border:thick solid #1C4F70 !important;
}

667px is fine for newer smartphones but leaves out the 640px crowd, which is a huge percentage of smartphone users.
Reply With Quote
  #6  
Old 13 Mar 2016, 19:56
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
@shimei

Originally Posted by ProSportsForums View Post
There should be media queries for @media screen (min-width: 320px) and (max-width: 667px) which cause the following two IDs to use 100% of the container width for small screen mobile devices:

div#widget_224.b-module.canvas-widget.default-widget.custom-html-widget {
width: 50%;
height: 100%;
border:thick solid #1C4F70 !important;
}

div#widget_225.b-module.canvas-widget.default-widget.custom-html-widget {
width: 50%;
height: 100%;
border:thick solid #1C4F70 !important;
}

667px is fine for newer smartphones but leaves out the 640px crowd, which is a huge percentage of smartphone users.


Thanks for that. . .
Guess that what community is about. . .
Reply With Quote
  #7  
Old 13 Mar 2016, 19:57
shimei shimei is offline
 
Join Date: Feb 2015
I am using @media queries to display: none on screen sizes below 667px. If one doesn't want that they only need not put the @media queries in additional_css. Or customize it as you have suggested.

I prefer not to display them on smaller screen resolutions. Actually, I try to make the site as bare bones as possible for little display devices.
Reply With Quote
  #8  
Old 13 Mar 2016, 19:58
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Originally Posted by shimei View Post
I prefer not to display them on smaller screen resolutions. Actually, I try to make the site as bare bones as possible for little display devices.
Makes sense now. . .
Seems we were posting at the same time. . .
Reply With Quote
  #9  
Old 13 Mar 2016, 22:51
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by shimei View Post
I am using @media queries to display: none on screen sizes below 667px. If one doesn't want that they only need not put the @media queries in additional_css. Or customize it as you have suggested.

I prefer not to display them on smaller screen resolutions. Actually, I try to make the site as bare bones as possible for little display devices.
Makes perfect sense. Everyone is going to have different needs. On my own sites I code everything for full HD 1920 X 1080 pixel resolutions. I think responsive design is entirely over-rated for modern technology. Virtually all new smartphones and tablets are now full HD resolution. But several clients still think their sites should cater to the iPhone 4 crowd so that's what they get.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 05:56.

Layout Options | Width: Wide Color: