Fluid width youtube video modules

[shimei]

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 (https://www.christforums.org/forum/entertainment-fun/computers-technology/11764-vbulletin-5-how-to-create-fluid-width-video-modules-horizonatal-aligned)

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

https://vborg.vbsupport.ru/external/2016/03/9.jpg

[DemOnstar]

Well done sir....

Is there a link where people can see them demonstrated?

[shimei]

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!

[DemOnstar]

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

[In Omnibus]

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.

[DemOnstar]

@shimei

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.:up:

Thanks for that. . .
Guess that what community is about. . .

[shimei]

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.

[DemOnstar]

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

[In Omnibus]

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. :)