Forum Support

Shape 5
March 28, 2024, 03:39:30 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Responsive videos - div with a class "s5_video_container"  (Read 645 times)
angour
Jr. Member
**
Offline Offline

Posts: 16



« on: July 03, 2014, 06:07:40 PM »

Hi guys,

could you please give a bit more detailed example of how to wrap videos in a div with a class. I found this information about the template but unfortunately no practical example:

"Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of "s5_video_container"."

If you could spell out an example with a Youtube video, it would be much appreciated

thanks!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: July 03, 2014, 08:02:35 PM »

Hello,

Here is an example of how you can implement this

<div class="s5_video_container">
<iframe width="300" height="215" src="//www.youtube.com/embed/DGRz2BJQRXU" frameborder="0" allowfullscreen></iframe>
</div>

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
angour
Jr. Member
**
Offline Offline

Posts: 16



« Reply #2 on: July 04, 2014, 04:01:23 AM »

Super, thanks for the quick reply, I will try this  Smiley
Logged
angour
Jr. Member
**
Offline Offline

Posts: 16



« Reply #3 on: July 04, 2014, 08:12:58 AM »

I tried pasting this as an example right into one of the website pages and unfortunately it did not work, nothing would appear. Hoever i had some success with this:

<div class="s5_video_container">
      <span style="text-align: center;">{youtube}gmy6lX08xuo<span style="text-align: center;">|512|288{/youtube}</span></span></div>

it does make the video responsive, however, for some reason it stretches it all the way to 100% of the width, even though we specified  the |512|288 resolution, which is roughly 75% of the space I think. Is there a way to limit the size of the video on the page when using this div class ""s5_video_container"

you can see the video here *first from the top) : http://ams8.siteground.eu/~carame97/upgrade/salsa-training-performance-team-group

many thanks!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #4 on: July 05, 2014, 12:12:09 AM »

Hello,

Try entering the code with the Editor set to None and also ensure Super User - Text Filtering is disabled. The width of the video before clicking is based on the container width. So if you have it published in the Top Row 1 and your Layout > Top Row 1 settings in the Template Manager were set to 50% + 50% with 2 modules it would split the video in half instead of the full page.

If you leave the Top Row 1 settings to automatic and only have 1 module in the row then it will span the entire page as that is how responsive works.

-Mike

Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.