How-to: Add Video Frame on Blog Post's Featured Video

By default Featured Videos in Posts are simply embeded into the page. If you would like to use the nice Video Frames as a background for the video, bellow are the instructions. (see screenshot bellow for end result)

Step 1:

In Karma v2.6 or higher:

Access the basic.php file found in /wp-content/themes/Karma/truethemes_framework/global and look in line 397 or line 407 for the code bellow.

In Karma v2.5 or lower:

Access the basic.php file found in /wp-content/themes/Karma/functions/global/ and look in line 310 for the code bellow.

//show video embed only if there is featured video url. if(!empty($video_url)){ $embed_video = apply_filters('the_content', "".$video_url.""); $html .= $embed_video; }  endif;

Replace that entire code with the following code:

//show video embed only if there is featured video url. if(!empty($video_url)){ $html.= '<div>'; $html.= '<div>'; $embed_video = apply_filters('the_content', "".$video_url.""); $html .= $embed_video; $html.= '</div>'; $html.= '</div>'; }  endif;

Step 2:

Add the following code to the Custom CSS area in Site Options > Styling Options:

 .video-main-featured {width:558px;height:363px;float:left;background:url(http://localhost:8888/wp-content/themes/Karma/images/_global/video_post_normal.png) 0 0 no-repeat;position:relative;} .video-frame-featured {width:558px;height:363px;position:absolute;top:10px;left:10px;background: url(http://localhost:8888/wp-content/themes/Karma/images/_global/preload-white.gif) center center no-repeat;} 

<strong>Please Note:</strong> Change <strong>localhost:8888</strong> with your own URL to properly call the new image

Step 3:

Download the following image (video_post_normal.png) and upload it to your server in /wp-content/themes/Karma/images/_global/ folder. (click image to show full size in popup, then right-click image to save to your computer)