Nowadays, there is no longer any website that is not responsive, i.e. that adapts to the display of the end device to ensure an optimal user experience. Unfortunately, many portals such as YouTube and Vimeo still use i-frames to embed their content on other sites. However, with a little CSS trick, the content can be customised as desired.

The instructions are based on a YouTube video, as I believe this content is used very frequently.

Enter this code with the YouTube video link as HTML source code in your article by either clicking the Show source code button or turning off the editor.

<div class="responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/....." frameborder="0" allowfullscreen></iframe>
</div>

Insert this code into the Custom.css of your template CSS:

.responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Done! Now your content will be displayed at the specified size, unless the screen is too small, in which case the content will be scaled to the width of the screen.