Full Width Video

Add in your style sheet

.youtube-player{width:100% !important}

Thanks! That makes the video container 100% wide (just like I asked ?? but now I’m wondering if there is a way to make the height proportionate so that the actual video fills the space both vertical and horizontal. Right now there is a large black area on both the left and right sides of the video when played.

Thanks again – I really appreciate the help.

with a little research, here is what I came up with based on CSS-Tricks (https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php)

.embed-youtube {
	position: relative;
	padding-bottom: 59.25%;
	height: 0;
	overflow: hidden;
	z-index:0;
	margin-bottom:20px;
}
.embed-youtube iframe,  
.embed-youtube object,  
.embed-youtube embed {
	padding:2%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 94%;
	z-index:0;
}

Seems to work great. Hope it is helpful for others.

With a little research, here is what I came up with based on CSS-Tricks (https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php).

.embed-youtube {
	position: relative;
	padding-bottom: 59.25%;
	height: 0;
	overflow: hidden;
	z-index:0;
	margin-bottom:20px;
}
.embed-youtube iframe,  
.embed-youtube object,  
.embed-youtube embed {
	padding:2%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 94%;
	z-index:0;
}

Seems to work great. Hope it helps someone else.

Figured it out, thanks to CSS-TRICKS:

.embed-youtube {
	position: relative;
	padding-bottom: 59.25%;
	height: 0;
	overflow: hidden;
	z-index:0;
	margin-bottom:20px;
}
.embed-youtube iframe,  
.embed-youtube object,  
.embed-youtube embed {
	padding:0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 95%;
	z-index:0;
}

adjust to taste.