Title: Full Width Video
Last modified: October 28, 2016

---

# Full Width Video

 *  Resolved [klpiazza](https://wordpress.org/support/users/klpiazza/)
 * (@klpiazza)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/)
 * 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](https://wordpress.org/support/users/altafhpatel/)
 * (@altafhpatel)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/#post-8370366)
 * Add in your style sheet
 * `.youtube-player{width:100% !important}`
 *  Thread Starter [klpiazza](https://wordpress.org/support/users/klpiazza/)
 * (@klpiazza)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/#post-8376395)
 * 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](https://wordpress.org/support/users/klpiazza/)
 * (@klpiazza)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/#post-8387253)
 * with a little research, here is what I came up with based on CSS-Tricks ([https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php](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](https://wordpress.org/support/users/klpiazza/)
 * (@klpiazza)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/#post-8387266)
 * With a little research, here is what I came up with based on CSS-Tricks ([https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php](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](https://wordpress.org/support/users/klpiazza/)
 * (@klpiazza)
 * [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/#post-8388133)
 * 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

 * [video](https://wordpress.org/support/topic-tag/video/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 5 replies
 * 2 participants
 * Last reply from: [klpiazza](https://wordpress.org/support/users/klpiazza/)
 * Last activity: [9 years, 10 months ago](https://wordpress.org/support/topic/full-width-video-2/#post-8376395)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics