Helping existing businesses, start-ups, and people just like you nationwide become rock stars on the Internet.

  • twitter
  • instagram
  • tumblr
  • youtube
  • email
  • rss
 
 

THREE31MEDIA

Helping existing businesses, start-ups, and people just like you nationwide become rock stars on the Internet.

What can our team do for you? Get in contact with us today!

 
 
 

How To: Responsive YouTube Videos

 

YouTube is a great platform and the ability to share videos from YouTube onto your website is amazing. But, one of the most common problems that web designers and website owners run into is that the default embed code that YouTube provides is not automatically mobile friendly. Below is a quick and easy way to make your YouTube videos scale appropriately on any device. We use this trick all the time for our websites and our clients websites.

Here’s the default YouTube code:

Here’s the modified YouTube code:

Here’s the CSS that makes it work:

This is the simple tutorial of how to make it work. If you’re more interested in the full details of what’s going on, how it works, and more advanced techniques then check out the article we referenced for this. It’s an article called Fluid Width Video found on CSS-TRICKS.

 
 

Posted on:

 
 

428 views

 
 

Sharing is caring!

  • Facebook
  • Twitter
  • Google+
  • linkedin
  • Tumblr
  • Buffer
 
 
 
 
 
 

getfreequote

Follow Us

Close