Responsive Youtube IFrame Embed

Go to a YouTube video – on YouTube.com

  • Click “Share” then “Embed” and grab the code

Default Embed Code:

DEafult Youtube iframe embed HTML code



I changed the default width="560" at the start to width="100%"
Also added style="max-width: 600px;" - after allowfullscreen:


   

I can’t show an example unfortunately, as my Free WordPress.com blog doesn’t allow to add any code. The embed above isn’t fully responsive.

Responsive Images with Inline CSS

This is how I create images that are full width in desktop devices and mobiles etc.

You just need to use:

max-width: 100%;
height: auto;

Good info here on W3 Schools


      
            <img src="image-address.png" 
style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
 

Change the “max-width” to whatever you want the max width of the image to be on a desktop device.

For personal reference, this is the exact code I need for my own website with pre-built classes:

 <div style= "margin-bottom:20px;" > 
      <div class="content-item">
            <img src="image-url" style="max-width: 100%; margin-bottom:0; max-width:1000px; height: auto;"
         alt="relevant description of image" >
      </div>
  </div>