Responsive iframe in WordPress

1 Views

Apologies for the very simple question! I am embedding a YouTube video on my WordPress site and want to make it responsive, is there a simple way I can add some code to the html – this is what I have at the moment: 

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/zmRoFi5HCAc?rel=0" frameborder="0" allowfullscreen></iframe></center>
Post Views: 1

Related posts

4 comments

  1. I think WordPress added new theme support for this (wp 5.x):

    // Add support for responsive embeds.
add_theme_support( 'responsive-embeds' );

    Reference: Developer Handbook

  2. In your theme’s CSS or custom CSS section add this style:

    iframe{
   max-width: 100%;
}

    This should make your iframe based video embeds, mobile responsive. Let me know if it worked or not? Also you may share your link please if it does not work.

    Thank you

  3. This CSS Tricks article explains how to do this well.

    I put some explanatory comments in the following snippet for you.

    .responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* fallback if calc() not supported */
    padding-bottom: calc(315 / 560 * 100%); /* aspect ratio of iframe */
    height: 0; /* let padding set the height */
}

.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* fill container */
    height: 100%; /* fill container */
}

center {
    width: 300px;
    margin: 0 auto;
    padding: 0 5px 5px 0;
    overflow: hidden;
    resize: both;
}
    <center><div class="responsive-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/zmRoFi5HCAc?rel=0" frameborder="0" allowfullscreen></iframe></div></center>

Comments are closed.