Customize Wistia CTA

Wistia video hosting is brilliant. I used this markup and inline CSS to create an nice looking Call To Action at the end of my Wistia videos.

This is the code that is placed in the Call To Action field. Make sure HTML is selected.

<style>
.video-overlay {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    bottom: 0;
    left: 0;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
}
.video-overlay .video-message {
    left: 0;
    margin: -75px 0 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
}
.video-overlay .hint{
    font-size: 14px;
    margin: 0;
    color: #999999 !important;
    font-weight: normal !important;
}
.video-overlay h3 {
    color: #FFFFFF;
    font-size: 30px;
    margin-bottom: 15px;
    margin-top:5px;
    font-weight: bold;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.button {
    background: #4090BA; 
    border: medium none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px !important;
    font-weight: bold;
    line-height: 1 !important;
    padding: 13px 15px;
    vertical-align: middle;
    white-space: nowrap;
}
.button-green {
    background-color: #82B964;
}
a {
    color: #4090BA;
    cursor: pointer;
    text-decoration: none;
}
.button-green:hover {
    background: #74B152;
}
</style>
<div>
    <div>
    <p>Your next step is...</p>
    <h3>PLACE THE TITLE OF THE NEXT VIDEO HERE</h3>
    <a href="url" target="_parent">BUTTON TEXT</a>
    </div>
    <!-- to be sure - use absolute complete URLs -->
</div>

Hire WordPress Experts at Codeable.

The only WordPress exclusive freelancer platform that connects thousands of customers with the top WordPress freelance experts to work on projects of any size. 

Free estimate • No obligation to hire • 100% risk-free