• 0
Sign in to follow this  
Followers 0

Videos in Full-Width Rev Slider?


Question

Posted · Report post

Hi.  I'm trying to imbed a video into my RevSlider but getting an error message from Vimeo, "Sorry there was a problem loading this video."  The Video on Vimeo is 1280 x 720 but I resized it to fit the RevSlider using this code, which i snatched from the RevSlider documentation sample code ( http://www.orbis-ingenieria.com/code/documentation/documentation.html#!/layout ).  Here's the code I used:

li data-transition="slideup" data-slotamount="20">
<img src="images/slides/image20.jpg"  >
                                <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack"><iframe src="http://player.vimeo.com/video/72601988" width="1068" height="601" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
 
                                <div class="caption lfb medium_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">to your Slides</div>
 
</li>

I suspect it might be stalling at the load because the code snippet refers to an img src that is not on my site?

 

Two questions:

 

1)  How do I fix this to show the video?  

 

2) I'm not really up on the CSS options for videos, but I can see there are plenty being referred to in the code snippet.  Is there some source, summary, or 'cheat sheet' I can use that gives me the options available?  For example, the code refers to data x andy, data speed (what is that?), data start (hmm, miliseconds after loading?), data easing (no idea what that means), data transition, data slotamount, etc...

 

What I would LIKE to have happen on this slide, (a) for the slide sequence to stop here (not loop), and (b) have an OPTION to START the video. 

 

Thanks in advance...

 

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Hi,

 

The code you used isn't correct, firstly, you're missing a &amp;lt; infront of your li&amp;gt; at the beginning of your code.

 

Also, from what I can tell, you're not using the correct embed code for your video. You can get this from Vimeo.

 

I add the following code and I get a video to display just fine with a background image too.

 

The data instructions are all provided on the RevSlider documentation, here is quick copy and paste of these instructions,

 

data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
data-speed duration of the animation in milliseconds
data-start after how many milliseconds should this caption start to show
data-easing special easing effect of the animation

Here is the code I used for my text.

https://gist.github.com/Dannyholt/3b3ce95a1017bc1edcf7

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny. I really must be blind, This is the second time you've seen something that I have not!  Appreciate your patience.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Danny, your code snipped does work fine.  I then tried dropping in the iframe code from another video, into the code that you provided, but it seems not to work. The error message says "video does not exist."

<img src="http://larryfire.files.wordpress.com/2013/04/disney-pixar-compilation-image-1519560.jpg">
    <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack"><iframe src="http://player.vimeo.com/video/72594845" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/72594845">SmartTime Logic</a> from <a href="http://vimeo.com/user20263678">Michael</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div>
    <div class="caption lfb medium_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">to your Slides</div>
Edited by leftcoastmichael

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0