• Web Design (WordPress, Joomla, etc.)

  Responsive Embed Video WordPress

  Posted by Patrick Mustain on January 21, 2015 at 9:00 pm

  Hullo!

  I’m not a programmer pr developer, I’m just trying to get some help with my portfolio site: https://patrickmustain.com/

  I’m using Hero theme, from Theme Trust, and it’s a responsive theme, at least on the home-porfolio page, and the projects page, and videos embedded from either youtube or vimeo resize just fine. Here’s an example: https://patrickmustain.com/project/move-over-kale

  But! On my “About” Page, I’ve embedded a video and it doesn’t resize: https://patrickmustain.com/about

  I’ve looked on other forums and found a number of suggestions with code included. I tried following the instructions from this post:
  https://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/

  But apparently I’m missing something. The post above says:

  ” you need to add a containing wrapper around the iframe. Your markup would be as follows:”

  Some contents or functionalities here are not available due to your cookie preferences!

  This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.

  So this is what it looks like on my website:

  Some contents or functionalities here are not available due to your cookie preferences!

  This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.

  Then it recommends adding some code to the CSS style sheet. In the Appearance menu, I went to “Editor” which I’m pretty sure is the CSS stylesheet, and pasted the following code at the very bottom:

  .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
  }

  .video-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;

  There is clearly a step or process I’m missing. Does “adding” something to the CSS stylesheet involve more than simply pasting some code at the bottom?

  I could use some help, and thanks so much!

  Patrick

  Patrick Mustain replied 11 years, 3 months ago 1 Member · 0 Replies
• 0 Replies

Reply to this Discussion! Login or Sign Up