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.