Jump to content

Archived

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

kiwibloke

RevSlider - how to add video and have it resize properly

Recommended Posts

kiwibloke

Hi All,

 

Anyone been able to get the RevSlider to show video like the default content does when you insert the RevSlider widget to a section?

 

If so, can you please provide me with an example of the code that you have tried and found to work?

I have tried pasting the following into the text field for the *RevSlider *without success:
 

<iframe src="http://player.vimeo.com/video/67237715?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

This method will show the video, but it does not stretch to fit the slide.

 

Have tried adding the following as well:

<script> $(document).ready(function(){ $("#iframe343").fitVids(); }); </script>

but still no joy.

I have also tried:

[pl_video type="vimeo" id="67237715" ]

This shortcode method does not seem to work at all.

What would be the correct way to get this to work please?

 

Thanks,
Martyn

 

Share this post


Link to post
Share on other sites
Rob

Martyn,

 

At Vimeo, you'll probably find two codes for adding to the slider.  One is their shortened URL. The other is the Old Embed Code.

 

Iframes do not work responsively as they're fixed sizes.  The shortened URL may work, depending on what Revolution Slider requires. You should obtain support for this from the developer as it's a third party product.

 

PageLines isn't going to affect either the way RevSlider displays videos or their responsiveness.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Khepri

I am having the same difficulty with this slider. Not only can I not get it to a smaller size but I cannot get it to show up live!
Chrome WAS A BAD CHOICE FOR THOSE OF US USING APPLE COMPUTERS. YOU BLEW THAT ONE GUYS! I know its not your fault because I know those windbags at Apple snub Chrome on purpose. But help me out please. <3


✔There is no perfect recipe for success! 
✔There is no failure, only feedback. 
✔There are no mistakes, only rainbow bridges to insights and wisdom. 

Share this post


Link to post
Share on other sites
Rob

Khepri, please don't type in call Caps as it's considered shouting.  Chrome was the only browser that provided the tools we could use for our Visual editor.  Oddly, almost all our developers use Apple computers for their work, so I'm not sure why you're having any issues with this. Unfortunately, I've not tested the RevSlider yet, so not exactly sure of the settings. I'd imagine though, it will use the simplest code for adding a slide.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Khepri

Khepri, please don't type in call Caps as it's considered shouting.  Chrome was the only browser that provided the tools we could use for our Visual editor.  Oddly, almost all our developers use Apple computers for their work, so I'm not sure why you're having any issues with this. Unfortunately, I've not tested the RevSlider yet, so not exactly sure of the settings. I'd imagine though, it will use the simplest code for adding a slide.

While I will not discuss the subjectivity of CAPS CONSIDERED TO BE "SHOUTING," I will focus on the fact that you didn't give me an answer. You gave a response with a value judgement that actually did not cite or state a policy that I violated, merely an accepted social norm amongst your group or culture.

That being said, if you don't have an answer for me, can you kindly direct me to someone that does. My posting only comes after days of tweeting and emailing pagelines with very minimal response.  So it seems like insult to injury to get a response from staff that seems like a value judgement and then have it be followed up with what  as you said, "I'd imagine though." 

So would it be possible to focus on assisting me in resolving the fact that Chrome does not work for me? I tried Firefox and Safari and neither worked. (I did this just to cover my bases.) I realize that there is a lot going on a PL this week and I applaud all of your effort, but I would like to request some support PLEASE.

My PlatformPro login still doesn't work correctly and I am trying to focus on DMS until you guys get that resolved. In the meanwhile, I need assistance.

Thank you in advance. :-)

http://youtu.be/xyewpj7rlAk
http://youtu.be/xyewpj7rlAk


✔There is no perfect recipe for success! 
✔There is no failure, only feedback. 
✔There are no mistakes, only rainbow bridges to insights and wisdom. 

Share this post


Link to post
Share on other sites
batman
Sorry my intrusion
I probe with my Mac and I can I see the editor
You can see
 
Please, you can try to add the RevSlider in the footer to see if it works as my
;)

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Khepri

batman You are NOT intruding. :-) Thank you for your help. I don't have that popping up for the slider for this page. It did for another page but there seems to be a bug and I don't know why. This is why all the help I can get would be helpful. Thank you for your efforts.

PS
I tried the header and the footer. It even worked once but whenever i went live it did not show on the page. :-( 


✔There is no perfect recipe for success! 
✔There is no failure, only feedback. 
✔There are no mistakes, only rainbow bridges to insights and wisdom. 

Share this post


Link to post
Share on other sites
batman

Sorry I don´t see this video, i suppose that it´s the other

;)

You can try change the template for a moment and see if that is the issue

Look at the image, I use the same version of Chrome that you

https://lh5.googleusercontent.com/-n_s6Gye-8N0/UfSPaunifgI/AAAAAAAASY8/MT3XN17laV0/s800/Captura%2520de%2520pantalla%25202013-07-28%2520a%2520las%252012.24.58%2520AM.jpeg

I´m not a moderator, I´m only a client like you, only I try to give a hand, sorry if i make a mistake.

;)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Khepri

NO WORRIES! I finally used the thing attached to my shoulders called a brain and disabled every last chrome extension and that seems to have caused the problem. When I figure out which one is the culprit, I will be sure to let the Pagelines community know. Thank you batman. Gracias! Estoy Muy Agradecido Y FELIZ! :-)


✔There is no perfect recipe for success! 
✔There is no failure, only feedback. 
✔There are no mistakes, only rainbow bridges to insights and wisdom. 

Share this post


Link to post
Share on other sites
batman

Hi again

I am using the DMS since yesterday.

Maybe we can start learning together


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman

Khepri

I hope the information. I´m sure that is very usefully to the Moderation Team

I also disable all now, hahaha, thanks for the "friends"

Saludos

Carlos


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Khepri

The culprit was a chrome extension called Galaxy for Chrome OS
I turned all my other extension on and now I am actually making progress. Thanks Batman! We need to get you a Bat Signal.

eWGeNTk.jpg
 


✔There is no perfect recipe for success! 
✔There is no failure, only feedback. 
✔There are no mistakes, only rainbow bridges to insights and wisdom. 

Share this post


Link to post
Share on other sites
batman

Thanks a lot for the information

I take note

wpml_mail.gif


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
blogmylunch

I am trying to embed a youtube video in the Rev slider and it's also not going in properly. See my staging site for example.  I had to put iframe code in text section because if I put it in on the slide extra elements section it doesn't even show up.

 

Nofyah


Israel does not exist as a country according to Pagelines Forums. Until it does, I'm not spending money on anything you have to offer.

Share this post


Link to post
Share on other sites
Rob Thomas
Nofyah, I am having the same problem. The RevSlider does not work properly with video. I've been stuck for several days as the build seems compromised by all the issues surrounding the botched launch. Bit I have no choice but to go forward starting tomorrow/ today.

Share this post


Link to post
Share on other sites
thebastion

Hi, anyone managed to get a video into the RevSlider yet?

 

The best I have managed is to get the video to show about 300px below the slider to the left!

 

Just want to embed a YouTube Video as per the default slide when you add the Slider.

Share this post


Link to post
Share on other sites
diretornak

Anyone got this solved? I also cant embed videos on rev slider.

Share this post


Link to post
Share on other sites
thebastion

So after more hunting and messing about I have managed to create this in a slider, the site is a development site so ignore any mess please and things might dissapear throughout the day:

 

my test site

 

The test video comes in the second slide. Now this is where things get weird , try this yourself…..

 

Create a local slider with 1 slide ( I know it does not make sense but do it ).

Put an image into the top section of the “RevSlider Slide 1”.

Copy and paste code below into the “Slide Extra Elements” section:

 

<li data-transition="slideup" data-slotamount="20">

<!-- EDIT THIS WITH YOUR OWN IMAGE <img src=" http://yourwebsite-here/wp-content/uploads/date/your.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/29298709?title=0&amp;byline=0&amp;portrait=0" width="460" height="259"></iframe></div>

<div class="caption lfb big_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">to your Slides</div>

</li>

 

Save publish and enjoy dealing with the code in that small editing area.

 

Oh and to save you headaches and pain it’s the <li></li> in the code above that’s causing there to be 2 sliders even though you have only created one in the RevSlider options. It is responsive but if you take the <li> out it all falls apart……

 

I must also add that none of the colour styles listen on the site like big_white etc work:

http://www.orbis-ingenieria.com/code/documentation/documentation.html#!/layout

 

This does not seem like the correct way to do this but I cannot work out another way using the actual inbuilt RevSlider options.

Share this post


Link to post
Share on other sites
thebastion

It seems like RevSlider does not like having buttons added into there either if you are viewing on Windows Firefox or IE 10. check here:

 

http://forum.pagelines.com/topic/28941-static-clickable-images-on-top-of-slider/

 

It works in Chrome but not in Firefox or IE 10. Possibly more tweaks we will have to work out like this one:

 

http://forum.pagelines.com/topic/28855-mediabox-not-working-in-firefox-230-and-windows-80/

Share this post


Link to post
Share on other sites
thebastion

So has anybody advanced on this or am I going to have to find out why it's a pain to do still?

Share this post


Link to post
Share on other sites
Danny

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
thebastion

Danny nice one, I have not tried this yet but the RevSlider official docs were a bit confusing when trying to use it with DMS. If you were using it directly in an html page it made total sense but it seemed like a bit of trial and error to see what affected the DMS Rev slider.

Share this post


Link to post
Share on other sites
hansonexperience

Great explanation. This is better then the doc on revalideer site. But now another question. If I want to add text on the left side of the video with the same look as when you but text in the slider without a video, how can I do that? I cannot just enter the text in the Slide text field. I think I have to put it in the Extra elements box? 

But what is the code for have that layout as standard?

Share this post


Link to post
Share on other sites
mightystrong

I've been trying to get a full width YouTube video as well with no luck. Wish we could get the example code used for the default slides that come with DMS. Anyone seen that?

Share this post


Link to post
Share on other sites
canadiangazelles

+1 to Danny's explanation. Super helpful. I played around with the data-x and y coordinates and start time for the provisional front page of the following site: http://hti.flywheelsites.com/

 

Many thanks as it's far better than the old code I was using (which included the <li>....</li> tag).

Share this post


Link to post
Share on other sites

×