Support » Theme: Gridsby » Full Width Video

  • Resolved klpiazza

    (@klpiazza)


    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)
  • 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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Full Width Video’ is closed to new replies.