New to the community? Start here

Hustle Pro pop up help

I want to create a FULL-Screen Pop with a background video. And few HTML contents over it
Can you please help me to achieve this?

Fri, 15 Nov 2019 10:22:30
More Hustle Pro discussions
Hustle Pro
  • Kris Tomczyk
    • Ex Staff

    Hi Shan

    I hope you are doing good today.

    This is a hard case because Hustle main content does not support source HTML tag.

    In the first place, you will need to add MU plugin to support this tag.

    1. On your pc in notepad create a file called hustle_support_video.php and place that code there:

    <?php
add_filter( 'hustle_module_main_content_allowed_html', function( $allowed_html, $moduleId ){
	$allowed_html['source'] = array(
		'src' => array(),
		'type' => array(),
	);
	$allowed_html['video'] = array(
		'autoplay'  => array(),
		'id'     => array(),
		'muted'   => array(),
		'loop'  => array(),
	);
	return $allowed_html;
}, 10, 2 );

    2. On ftp create a folder /mu-plugins/ in /wp-content/ and upload above file there a file. Final path should look like /wp-content/mu-plugins/hustle_support_video.php

    In your Hustle pop up, inside Main Content area place below code:

    <div class="hustle_video"><video autoplay muted loop id="myVideo">
  <source src="http://domain.com/video.mp4" type="video/mp4">
</video></div>
<div class="hustle_title">TITLE</div>
<div class="hustle_logo"><img src="http://http://domain.com/logo.jpg" /></div>
<div class="hustle_text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>

    where:
    http://domain.com/video.mp4 – replace to correct video path
    TITLE – replace to correct title
    http://http://domain.com/logo.jpg – replace to correct logo path
    Lorem Ipsum… – replace correct text

    Next step will be custom css in Appearace -> Customize -> Additional CSS section:

    .hustle-icon-close {
display: none!important;
}

.hustle_video {position:absolute; left:0; top:0; width:100%; height:100%;overflow:hidden;}
.hustle_video video {width:100%;}
.hustle_title {font-weight:bold; text-align:center; display:block; overflow:hidden; position:relative;}
.hustle_logo {text-align:center; display:block; overflow:hidden; position:relative;}
.hustle_logo img {max-height:50px;}
.hustle_text {text-align:center; display:block; overflow:hidden; position:relative;}

.hustle-ui.hustle-popup {padding:0 !important;height:100% !important; }
.hustle-ui.hustle-popup .hustle-popup-content {max-width:100%  !important; width:100%  !important; height:100% !important; }

    Where I recommend playing with CSS only around:
    .hustle_title
    .hustle_logo img
    .hustle_text
    to make data look better inside that pop-up.

    Kind Regards,
    Kris