Embedding a Youtube Video in your posts or pages while keeping it responsive is very easy. Here is a very convenient shortcode + a few CSS for the job. You can quickly customize any WordPress theme (created with Pinegrow Web Editor or not) with the following snippets.

The initial Setup

1/ Add the following to your functions.php file. (you can customize the function name)

function pg_blog_youtube_video_shortcode( $atts ) {
    extract( shortcode_atts( array (
        'id' => ''
    ), $atts ) );
    return '<div class="video-container"><iframe width="320" height="240" src="//www.youtube.com/embed/' . $id . '?&rel=0&theme=light&loop=1&showinfo=1&modestbranding=1&hd=1&autohide=1" frameborder="0" allowfullscreen></iframe></div>';
}
add_shortcode ('youtube', 'pg_blog_youtube_video_shortcode' );
pg_blog_youtube_video_shortcode

2/ Add the following to your style.css file.

.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%;
}

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
        max-width: 100%;
}
Responsive Video CSS

 

How to use the shortcode in WordPress

In the visual editor, when you want to add a Youtube Video, use the following shortcode

[youtube id="BK6pKsEq4FA"]

Where BK6pKsEq4FA is the reference of the Youtube Video (for example in https://www.youtube.com/watch?v=BK6pKsEq4FA )

making-embedded-youtube-videos-responsive

The live example

For the following video, we use:

[youtube id="6v2L2UGZJAM"]