Emedding a video isn’t always as easy as copying code from YouTube

Just because you get embed code from YOUTUBE doesn’t mean it’s responsive for all devices and browsers.  Responsive means that the size will adjust proportionately depending on the device being used to view it: smartphone, tablet, laptop. Safari also has issues being responsive. This post will help you solve that everywhere. This site will help you. It gives you two parts:

STEP 1 – go to YouTube or Vimeo and find the video you want to embed and copy the link to specific video or playlist or channel.

STEP 2 – go to http://embedresponsively.com/ and paste in the YouTube or Vimeo link you want to embed..

STEP 3 – you’ll be given your embed code to use. Here’s an example of YouTube code:

STEP 4 This part goes in your <head> </head> area of your webpage:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

STEP 4 ALT or in your stylesheet instead this way:
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

STEP 5 Then, you get the part that goes in the place you want to embed the video.
This is done in the Text, SOURCE or CODE view of your editor or in a widget area where you can embed code:
<div class=’embed-container’><iframe src=’http://www.youtube.com/embed/videoidhere’ frameborder=’0′ allowfullscreen></iframe></div>

If you want to know how it will look on smaller devices, try viewing on ipadpeek.com – you can change the orientation, and for those of you who love to tweak css, you can even F12 it and see where to make your changes to solve the issue.  If you get stuck, or want someone to help clean up the videos on your site, let me know.

By: