I am trying to make a youtube video appear as a pop-up or light-box over the website when I click a standard Qode button v2.
I was looking over previous question and answers, but it seems I cannot figure this one out.
Can you help me?
The Button elements included in the theme are not intended to display pop-ups.
However, there is a workaround that allows you to display image or YouTube video in a lightbox when the button is clicked.
First add Raw HTML element to the page via Visual Composer.
To display an image, paste the following code inside:
<a class="qbutton" href="http://demo.qodeinteractive.com/bridge/wp-content/uploads/2014/03/graphic2.jpg" rel="prettyPhoto">See Image</a>
...and replace image URL with URL of the image that you have uploaded previously into Media -> Library.
For YouTube video, paste the following code instead:
<a class="qbutton" href="https://www.youtube.com/watch?v=hgXbyLHKqrM" rel="prettyPhoto">Watch Video</a>
...and put URL of your YouTube video.
Note the 'qbutton' class - if you omit it, it will be rendered as simple text link.
Or you could try to find some additional third party plugin with desired functionality.
* The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/
* You can also check our articles with useful tips and suggestions
Thank you! It works :)
But I have a follow-up question. My button is a v2 version with the following code:
[qode_button_v2 target="_self" icon_pack="font_awesome" icon="fa-video-camera" font_weight="400" text_transform="uppercase" hover_effect="icon_rotate" gradient="no" text="Watch Video" color="#ffffff" hover_color="#ffbe00" background_color="#364a68" hover_background_color="#566b89" icon_border_color="#566b89" icon_border_hover_color="#ffbe00" font_size="14" icon_font_size="14"]
Is there a way to apply that to the raw html that you mentioned. It would be best if I could have the same type of button as on the rest of the website.
Thank you very much for your help!
Bridge is an excellent theme and the support team is great. Thanks again.
We are glad that you like Bridge.
Try adding the following code into Raw HTML element and replace video URL:
<a href="https://www.youtube.com/watch?v=DCUcqHzhtx4" target="_self" class="qode-btn qode-btn-medium qode-btn-solid qode-btn-custom-hover-bg qode-btn-custom-hover-color qode-btn-icon qode-btn-icon-rotate" data-hover-bg-color="#566b89" data-hover-color="#ffbe00" rel="prettyPhoto">
<span class="qode-btn-text">Watch Video</span><span class="qode-button-v2-icon-holder" data-hover-icon-border-color="#ffbe00"><i class="qode_icon_font_awesome fa fa-video-camera qode-button-v2-icon-holder-inner"></i></span>
It seems to work on our test page.
Well... thank you very very much! It works as intended.
I appreciate your effort to code and test this custom solution. Thanks again for your help!
You are welcome Andrei, we are glad that we could help.
Have a nice weekend,