Jump to content

Archived

This topic is now archived and is closed to further replies.

canadiangazelles

How to embed video in RevSlider?

Recommended Posts

canadiangazelles    6
canadiangazelles

Hi, I'm trying to embed video in RevSlider using the following code but I'm not sure where to insert the code (the link is just an example) within the boxes that are available for RevSlider. Any insights would be greatly appreciated. 

Many thanks in advance.

 

<li data-transition="boxslide" data-slotamount="7" data-link="HTTP://www.youtube.com/embed/gu6xDZHnI0I">
   <img src="images/slides/image1.jpg">
   <div class="caption sft big_white"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
   <div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
   <div class="caption lfr medium_grey"  data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
 </li>

 

OR SHOULD I JUST BE PASTING THE FOLLOWING IN A SPECIFIC FIELD?

<iframe width="420" height="315" src="//www.youtube.com/embed/gu6xDZHnI0I" frameborder="0" allowfullscreen></iframe>

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

Thanks so much, Jake, but alas, I can't see the post you're linking to (Pagelines is looking into my account issues). My issue seemed to be that I still had the photo option checked so it was showing the picture. 

 

I pasted code and now get this: 

 

http://hti.flywheelsites.com/

(it's on the first slide)

 

I'll look around to see how to make it full screen / full width. 

 

Thanks so much; if any other links to create it full width or any other suggestions to make it look more interesting, do let me know. 

 

Many thanks again.

Share this post


Link to post
Share on other sites
canadiangazelles    6
canadiangazelles

PS. I changed the code to the below (2000x800) but it looks like it scaled the whole video up: 

 

<iframe width="2000" height="800" src="//www.youtube.com/embed/gu6xDZHnI0I" frameborder="0" allowfullscreen></iframe>

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hmm....sorry to hear you're also having forum issues. Let me first check on the status of that so you don't have any roadblocks getting support. Hang on...


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I have copied and pasted my reply to the Pro only topic.

 

HI,

OK, it definitely looks as though, I need to write something up for the RevSlider.

Here are the instructions on how to add a video to the Revslider. You can't simply add an iFrame to the Slide Extra Elements option field and expect it to work, thats not how the RevSlider works. You need to use some HTML, that is explained and provided (albeit not very well) on the RevSlider docs linked in the Slide Elements option.

But here is a basic run down, using the code provided by thebastion.

https://gist.github.com/Dannyholt/aa2b8cf65704a156531d

As you can see, Ive added comments to the code that isn't actually needed and if you use this code, it will actually add another slider to your slider, thats what the <li>....</li> tag is for.

The <img src=""> code is actually your slides background, this too is not needed, as you can upload your background image via the DMS uploader. So remove all the code that has <!-- Not Needed --> and you will be left with this example.

https://gist.github.com/Dannyholt/10f30fc95e97b331c91f

Where we have the three dots ... between the <divs> is where you add your Video embed code. Now before doing this, you need to realise that their are a number of classes provided by RevSlider that can change the look and feel of your Slide and how they act.

As you can see from the code provided above, the div has a number of classes and data-, these give your slider additional options such as speed all these are provided on the RevSlider docs with information on what they do.

If you want to know how the video on the third slide has been added to the default slides when you add RevSlider to your template, all you need to do is add the following code into the Slides Extra Elements option.

https://gist.github.com/Dannyholt/4133e2638f4760eeeb87

If you still encounter an issue with your video, it is most likely one of two things. One you haven't added the embed code correctly. Two, the video can not be embedded.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×