Full Width Video

Resolved klpiazza
(@klpiazza)

9 years, 7 months ago

Hi – Love the theme, but am having an issue with youtube videos in the blog. They are not the same width as the text and photos. So my question is: Is there a way to force them to span the width of the text? Thanks!

for example:
http://doodl.us/art/award-winning-creative-gateway-community-2011/

Viewing 5 replies - 1 through 5 (of 5 total)

Altaf Hussain Patel
(@altafhpatel)

9 years, 7 months ago

Add in your style sheet

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

Thread Starter klpiazza
(@klpiazza)

9 years, 7 months ago

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.
Thread Starter klpiazza
(@klpiazza)

9 years, 7 months ago
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.
Thread Starter klpiazza
(@klpiazza)

9 years, 7 months ago
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.
Thread Starter klpiazza
(@klpiazza)

9 years, 7 months ago
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.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Full Width Video’ is closed to new replies.

Tags