- Visit http://embedresponsively.com/
- Select the appropriate platform or Generic iFrame
- Paste the embed code (CornellCast, Flickr, etc.)
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'
andheight='315'
:Code Block <iframe src='//www.cornell.edu/video/fall-break-in-ithaca/embed' width='560' height='315' frameborder='0' allowfullscreen title='CornellCast video'></iframe>
- Hit the Embed button
- The iframe will preview and a text box under it will display the code you'll need to copy/paste
- Select the code and copy it
- Navigate to the WordPress page, edit it, and select the Text tab
- Paste the whole code where you want the iframe to be embedded
- Save the page and preview your changes, making sure to hit the Clear URL cache button in the WordPress black admin bar
- 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:
Code Block |
---|
<style> |
...
.embed-container { position: relative; padding-bottom: 56.25%; |
...
</style>
...
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>
|