Support » Themes and Templates » Adding a Wrapping Div to Video Embeds

  • Just moved to a new theme I made that is based on the Skeleton 960 grid and I have some great CSS that will allow video embeds to resize with the window. However to make it work I need to wrap all video embeds (iFrames) with a div with the class “embed-container.” I pretty much exclusively use Youtube and Vimeo. I think I narrowed this down to the wp-include files media.php and class-oembed.php. Any help?

Viewing 1 replies (of 1 total)
  • Just in case anyone still needs the answer to this like I did, pu this in your functions.php

    add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
    function my_embed_oembed_html($html, $url, $attr, $post_id) {
      return '<div class="video-container">' . $html . '</div>';
    }

    and it will wrap embeds in a div. To make the embed responsive add this to your css

    .video-container {
    	position: relative;
    	padding-bottom: 56.25%;
    	padding-top: 30px;
    	height: 0;
    	overflow: hidden;
    }
    
    .video-container iframe,
    .video-container object,
    .video-container embed {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘Adding a Wrapping Div to Video Embeds’ is closed to new replies.