Return to previous page

Self hosted video pop up (finances demo)

This topic has 4 replies, 3 voices, and was last updated 8 years, 9 months ago ago by Olga Barlow

ap1011

Participant

January 31, 2017 at 11:24

on your finance demo home page you have an image that when clicked launches a video popup, we’d like to have the same, but not hosted on you tube, instead a self hosted video.

we have the mp4 and ogg file for the video, but not sure how to add

bets way to do this?

#153537 Copied

3 Answers

Olga Barlow

Participant

January 31, 2017 at 18:32

Hello,

We used Lightbox element to create that popup. You’ll be able to add the link to your self-hosted video http://prntscr.com/e2rlyp but it’s possible to add link to one format only. This element is Massive Addons plugin element and it does not have any other additional options.

Regards

#153595 Copied

etinteractive

Participant

March 6, 2017 at 20:43

can you give us the full code for this?

I cannot replicate this from the screenshot only.

#156363 Copied

Olga Barlow

Participant

March 9, 2017 at 12:58

Hello, @etinteractive,

You can import Finance Home page only to check how it was created, dummy.xml file for the finances version you can find in XML_Files folder that comes in theme package.

If you need just code of the row with that element you can find it below

[vc_row full_width="stretch_row" equal_height="yes" content_placement="middle" css=".vc_custom_1483698586616{padding-top: 8vw !important;padding-bottom: 8vw !important;background-color: #4caf50 !important;}"][vc_column width="1/2"][vc_column_text]
<p style="font-size: 42px; line-height: 50px; color: #fff; font-weight: 500;">“Your Child, Our Future” Innovation through
education.</p>
[/vc_column_text][vc_column_text]
<p style="color: #ccffce;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
[/vc_column_text][/vc_column][vc_column width="1/2" css=".vc_custom_1484131920918{padding-top: 0px !important;background-image: url(https://www.8theme.com/demo/xstore/finances/wp-content/uploads/sites/28/2017/01/video-bg.png?id=53) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="text-center video-popup"][mpc_lightbox preset="default" lightbox_url="url:https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6v2L2UGZJAM||target:%20_blank|" mpc_button__font_preset="default" mpc_button__font_color="#555555" mpc_button__font_size="40" mpc_button__font_line_height="1.3" mpc_button__font_transform="uppercase" mpc_button__font_align="center" mpc_button__icon="fa fa-play" mpc_button__icon_color="#4caf50" mpc_button__icon_size="30" mpc_button__icon_effect="stay-left" mpc_button__background_color="#ffffff" mpc_button__border_css="border-radius:100px;" mpc_button__padding_css="padding:0px;" mpc_button__hover_icon_color="#ffffff" mpc_button__hover_background_color="#4caf50" mpc_tooltip__disable="true" mpc_tooltip__preset="default" mpc_tooltip__position="right" mpc_tooltip__show_effect="slide" mpc_tooltip__font_preset="default" mpc_tooltip__font_color="#555555" mpc_tooltip__font_size="16" mpc_tooltip__font_line_height="1.5" mpc_tooltip__font_transform="capitalize" mpc_tooltip__font_align="center" mpc_tooltip__text="RGVmYXVsdCUyMGNvbnRlbnQlMjB0ZXh0JTIwZm9yJTIwZnV0dXJlJTIwdXBkYXRlcy4lMjBMb3JlbSUyMGlwc3VtJTIwZG9sb3IlMjBzaXQlMjBhbWV0JTJDJTIwY29uc2VjdGV0dXIlMjBhZGlwaXNjaW5nJTIwZWxpdC4lMjBNYXVyaXMlMjBmZXJtZW50dW0lMkMlMjBtZXR1cyUyMGlkJTIwdmVzdGlidWx1bSUyMGF1Y3RvciUyQyUyMG9kaW8lMjBzYXBpZW4lMjBiaWJlbmR1bSUyMGlwc3VtLg==" mpc_tooltip__background_color="#f3f3f3" mpc_tooltip__padding_divider="true" mpc_tooltip__padding_css="padding-top:10px;padding-right:20px;padding-bottom:20px;padding-left:20px;" class="video-icon"][/vc_column][/vc_row]

And custom CSS

.video-icon i{
    width: 100px;
    height: 100px;
    line-height: 100px;
    padding:0 !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.4);
}
.video-icon i:before{position:relative;left:4px;}
.finance-progress h4{
    font-size:14px;
    font-weight:600 !important;
    text-transform:none !important;
    padding-bottom:0px !important;
}

Regards

#156558 Copied