Embed Responsively

macro.css

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

macros.html

{% macro embedVimeo(url) %}
	{% set url = url|replace('https://vimeo.com/', 'https://player.vimeo.com/video/') %}
	<div class='embed-container'>
		<iframe src='{{ url }}' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
	</div>
{% endmacro %}

{% macro embedYoutube(url) %}
	{% set url = url|replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/') %}
	<div class='embed-container'>
		<iframe src='{{ url }}' frameborder='0' allowFullScreen></iframe>
	</div>
{% endmacro %}

{% macro embedGoogleMap(url) %}
	<div class='embed-container'>
		<iframe src='{{ url }}' width='600' height='450' frameborder='0' style='border:0'></iframe>
	</div>
{% endmacro %}