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 a WordPress Expert

Get hourly and project based theme customization, theme tweaks, and development help from world-class WordPress developers at Codeable. If you’re in Kelowna and need a custom website for your business visit our Kelowna Web Design page now to get started.