Button to open video in pop-up / light-box

[ianll]

Hello,
I would like to add a class to a button that will allow the link to open in a pop-up or lightbox. Scenario: I want to add a button to my revolution slider (which is showing youtube videos) so the user can click the button and view the youtube video with sound in its entirety but NOT open a new tab or window, so they stay on my site. Is there a class or function I could add that would allow this?

[US]

I am with here on this! Same issue:
https://archived.seventhqueen.com/forums/topic/simple-modal-markup-is-broken

Modals should working but are very broken if you use normal bootstrap markup

I think you are wanting this right?:
http://traffic.mg/modal-video/ which should work here too as this theme is presumed boostrap 3 unless there’s been some heavy mods to prevent this from working normally

[ianll]

Your example link is exactly what I am looking to do. I want to add this button on my revslider. I have no customizations outside of the child theme css file…

[US]

@abe care to weigh in here?

[ianll]

Wondering if this may be a conflict with rtmedia? Check out the screen shot in my link:
http://www.evernote.com/l/AIIFF2joHt9O46G3zJzWiv-xOmNe1MHBhGM/

rtmedia uses modal overlays when adding a new album and they are pretty jacked up.

I really need to be able to use modals and even using the bootstrap html classes and markup they are not working. Can we get this handled today?????

Much appreciated.

[US]

It’s not RT media… I need this resolved too

[ianll]

@us do you have the same issues as displayed in my screen shot with adding an album? Does the modal work properly on your add new album screen?

[ianll]

@us do you have the same issues as displayed in my screenshot with adding an album? Does the modal work properly on your add new album screen?

[ianll]

Please let me know whats going on with this one. I really need the modal window to function for this project and nothing I’m doing seems to be working. Can I anticipate a response for this one? This should be included with bootstrap and rtmedia is utilizing modals on my site so I know it will work, I just need some details on how. Please help, thanks

[ianll]

I’m getting the modal to work but still have some issues. Can anyone point me in the direction of some documentation for utilizing Modals within this theme?

[ianll]

I found the code in /wp-content/themes/kleo/assets/js.app.js If I add the class kleo-show-login to the link I can get the login modal to pop up. Assuming I need to extend this or a related class to get the desired effect. Any support to achieve this????

[ianll]

Sorry I missed a / in the path above /wp-content/themes/kleo/assets/js/app.js

[US]

@abe Come on fellas! What gives on the modals…is this broken or what do we do please?

[ianll]

Hello Support / @Abe

This is really a pain and holding up my delivery of a project. I’ve spent countless hours on this and really need the support. No response to myself or others looking for the same functionality is a real bummer! There are several ways to achieve this but ultimately is going to require some code that is not presently available in the theme. Even with adding all the js/css and html for a modal it does not work properly as it conflict with the way it is natively implemented in the theme. I see most of the code that is being leveraged in the theme for things like login modals but obviously that code needs to be expand on to allow for a button to open a full screen modal. PLEASE PLEASE PLEASE PLEASE PLEASE help

[ianll]

Why wont anyone from the support team respond to this? I understand there are bugs and broken items in software, it happens – but I cant even get a hint if this is the case or just my ignorance. Please help.

[sharmstr]

Kleo already loads Magnific Popup. Add a button to your slider with a link to the video and the popup-youtube class

COPY CODE

<a href='http://www.youtube.com/watch?v=0O2aH4XLbto'>Red Button</a>

In Theme options > General Settings > Js add the Magnific Popup code that will trigger the modal

COPY CODE

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('.popup-youtube').magnificPopup({
		disableOn: 700,
		type: 'iframe',
		mainClass: 'mfp-fade',
		removalDelay: 160,
		preloader: false,

		fixedContentPos: false
	});
});
</script>

You can change the popup attributes to your requirements. Here’s a reference http://dimsemenov.com/plugins/magnific-popup/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[ianll]

I really appreciate this response! I’ll let you know how it goes.

Thank you again.

[ianll]

OK This works, I cant seem to figure out why the video is opening way down the page rather than on top of the slider, you would never know its there except that the whole page has the overlay gray color. Any idea how to position the modal over the slider?

[sharmstr]

Did you read the documenation at the link I sent you?

http://dimsemenov.com/plugins/magnific-popup/documentation.html#options

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[webmaster-sw]

Didn’t know about this kleo-login class. Thanks for that, just what I was looking for.

[Author]

Posts