Adding YouTube Videos to Tour Pages on Midway Responsive Wordpress Theme

Originally I wanted to add my embedded YouTube Video to the 'day' boxes on the left hand side of the Tour Pages on Midway Responsive Wordpress Theme.  As pictured here on the Polzeath Camping


Which looked fine on my PC.  However it messes up the Responsive aspect of this theme when you go small.  So making the site look awful on tablets and smart phones.

I added the Video just underneath the top gallery in the end.  I've tested this on a heap of views and it looks good. 

Here' what I needed to add to the code to make this work .  Please note I've made these notes as if you're hacking the 'Midway' theme but highly recommend you do this in a child theme concept. Also remember to make a full backup before attempting this.

OPEN wp-content/themes/midway/style.css

AT THE BOTTOM OF PAGE ADD

div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
margin-top: 5%;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

SAVE AND UPLOAD

OPEN wp-content/themes/midway/single-tour.php

FIND

UNDERNEATH ADD

            $youtubevideo=themex_youtubevideo($post->ID);
        if ($youtubevideo != NULL) {
        ?>
        


          

SAVE AND UPLOAD

OPEN wp-content/themes/midway/framework/config.php

FIND

array(    'name' => __('Facebook','midway'),
                            'desc' => __('Does this tour have a seperate Facebook Account','midway'),
                            'id' => 'facebook',
                            'type' => 'text'),    

ABOVE ADD

array(    'name' => __('YouTubeVideo','midway'),
                            'desc' => __('The id of the YouTube Video you want to show for this tour .  If any!.','midway'),
                            'id' => 'youtubevideo',
                            'type' => 'text'),    

SAVE AND UPLOAD

OPEN wp-content/themes/midway/framework/functions.php


################
All you need to do then to add further Videos is copy the Youtube id . Which is after the 'v=' in the URL.



FIND

function themex_emaillink($id=null, $before='', $after='') {

ABOVE ADD

function themex_youtubevideo($id=null, $before='', $after='') {
    
    $youtubevideo=get_post_meta($id,'_tour_youtubevideo',true);
    
    $out=$youtubevideo;
    
    return $out;
}  

SAVE AND UPLOAD

Thats all the changes to the site done.  Now you need to set the videos in the database.

You'll need to get the Youtube ID


> The goto your /wp-admin

> Go to 'Tours' on the left menu

> In the main window click on 'edit' - under the Tour you want to add the Video too.

> Scroll down to 'Tour Options' and paste the Youtube ID in . In the 'YouTubeVideo' input box. 

> then you'll need to click on 'update' - upper right hand side of the blog.