Update April 2019

Embed Responsively seems to be struggling with Flickr embeds. Use https://iframely.com/domains/flickr instead. The code can be copy/pasted as is without removing any absolute size dimensions.

 

  1. Visit http://embedresponsively.com/
  2. Select the appropriate platform or Generic iFrame
  3. Paste the embed code (CornellCast, Flickr, etc.)

  4. Before hitting the Embed button, in the embed code, locate and delete any width and height values. In the example below, you would delete width='560' and height='315':

    <iframe src='//www.cornell.edu/video/fall-break-in-ithaca/embed' width='560' height='315' frameborder='0' allowfullscreen title='CornellCast video'></iframe>
  5. Hit the Embed button
  6. The iframe will preview and a text box under it will display the code you'll need to copy/paste
  7. Select the code and copy it
  8. Navigate to the WordPress page, edit it, and select the Text tab
  9. Paste the whole code where you want the iframe to be embedded
  10. Save the page and preview your changes, making sure to hit the Clear URL cache button in the WordPress black admin bar
  11. View the page on mobile or reduce the width of your browser on desktop to check if the embed is indeed responsive

Markup

The final code that you'll be pasting in WordPress, cleaned up, will look like:

 

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

</style>
<div class='embed-container'><iframe src='//www.cornell.edu/video/fall-break-in-ithaca/embed' frameborder='0' allowfullscreen title='CornellCast video'></iframe></div>