Jump to content


Photo

How to embed video in RevSlider?


  • Please log in to reply
6 replies to this topic

#1 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 12 September 2013 - 10:12 PM

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>



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 12 September 2013 - 10:39 PM

Hi @canadiangazelles - You want to put code for video in the box titled "Slide Extra Elements". For more information, check out this post as well http://forum.pagelin...dth-rev-slider/.



#3 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 12 September 2013 - 10:48 PM

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.



#4 canadiangazelles

canadiangazelles

    Advanced Member

  • DMS Subscriber
  • 40 posts
  • Country: Country Flag

Posted 12 September 2013 - 10:49 PM

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>



#5 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 12 September 2013 - 10:59 PM

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



#6 tristanrodgers

tristanrodgers

    Member

  • Members
  • 12 posts
  • Country: Country Flag

Posted 21 November 2013 - 02:52 AM

hey i have the same problem, i don't know how to integrate a video into the revslider and i have no permission to see the following link as a pro user?

 

http://forum.pagelin...dth-rev-slider/



#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 13067 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 November 2013 - 01:35 PM

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.

 

 

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.

 

 

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.