CODEWITHSUNDEEP
htmlwordpressiframe
Alzad
Alzad

Reputation: 31

Responsive iframe in WordPress

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>

Upvotes: 3

Views: 8679

Answers (4)

Frank
Frank

Reputation: 2357

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

Upvotes: 3

Jeroen Ooms
Jeroen Ooms

Reputation: 116

I wrote a plugin called "Responsive Media". It makes embedded media (by oEmbed) like a Youtube video responsive. All you have to do (after installing this plugin) is just inserting the Youtube video URL in your article.

https://nl.wordpress.org/plugins/responsive-media/

Upvotes: 0

Jacob
Jacob

Reputation: 2157

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>

Upvotes: 1

Muhammad Asad
Muhammad Asad

Reputation: 3793

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

Upvotes: 1

Related Questions