Forum Support

Shape 5
March 28, 2024, 06:27:16 AM *
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: How to display video in Top_row1_1 custom module like demo  (Read 528 times)
bigmike
Jr. Member
**
Offline Offline

Posts: 12



« on: May 27, 2015, 06:52:15 AM »

http://saltwatercowboys.life/

I want to play a video like in the demo.  How can add a youtube or vimeo video popup like in demo?  Below is the current code in the module:

<div class="services_wrap">
   <div class="services_wrap_inner">
      <div class="s5_is_css_9">
         <img alt="image2" src="images/image1.jpg" />
         <div class="s5_is_slide_css dark s5_higlightback">
            <div class="s5_is_slide_css_inner">
               <h3>
                  Spring Spearfishing</h3>
            </div>
         </div>
      </div>
   </div>
</div>

Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: May 27, 2015, 08:21:59 AM »

Hello,

You need to wrap the video in a multibox class so it can appear in a pop up. I would suggest disabling your editor and copying the source code from this page.

http://www.shape5.com/demo/eventfull/athletic/index.php/tutorials-menu-48/custom-code-for-this-design

Regards,
« Last Edit: May 27, 2015, 09:01:11 AM by mikenicoll » 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
bigmike
Jr. Member
**
Offline Offline

Posts: 12



« Reply #2 on: May 27, 2015, 08:56:41 AM »

I don't see any code referencing a youtube link in that source code.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: May 27, 2015, 09:03:33 AM »

Hello,

I am seeing a YouTube example under that page under Register and Play buttons at the bottom.

Regards,
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
bigmike
Jr. Member
**
Offline Offline

Posts: 12



« Reply #4 on: May 27, 2015, 09:55:41 AM »

This is the code provided by the demo content when I installed this template and it is currently published on my site:

<div class="services_wrap">
<div class="services_wrap_inner">
<div class="s5_is_css_9"><img src="images/image1.jpg" alt="image2" />
<div class="s5_is_slide_css dark s5_higlightback">
<div class="s5_is_slide_css_inner">
<h3>Watch 2014 Recap</h3>
<a id="youtube" class="s5mb" title="Firebug Tutorial Video" href="http://www.youtube.com/v/4kmZ9uQcA_c" rel="width:800,height:447">[/url]</div>
</div>

The problem is that it's not like it is on your demo site.  There is no play button and the video can't be selected.  Can you please provide the correct code for the demo on your site?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: May 27, 2015, 10:29:02 PM »

Hello,

The coding below definitely has the span class for the play icon. If you have TinyMCE editor enabled you need to disable this and then save the coding. TinyMCE by defualt strips <span> classes without any content. Any icon class does not have content as it just uses an icon call so that is most likely what is happening.

Code:
<div class="services_wrap">
<div class="services_wrap_inner">
<div class="s5_is_css_9">
<img alt="image2" src="images/image1.jpg"></img>
<div class="s5_is_slide_css dark s5_higlightback">
        <div class="s5_is_slide_css_inner">
<h3>Watch 2014 Recap</h3>
<span class="s5_is_slide_text">
<a  rel="width:800,height:447" href="http://www.youtube.com/v/4kmZ9uQcA_c" id="youtube" title="Firebug Tutorial Video" class="s5mb"><span class="ion-ios-play" style="color:#000000;font-size: 1.7em;"></span></a>
</span>
        </div>
</div>
       </div>

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