(SEMI) FINAL

✅ Resize FONT

```html

<p style="font-size: 20px;">

  This is bigger text.

</p>

```

---

✅ Resize IMAGE (Responsive)

```html

<img

  src="https://.../final.png"

  alt="Responsive image"

  style="width: 100%; height: auto;"

/>

```

✔ `width:100%` makes it fully responsive

✔ `height:auto` keeps aspect ratio

---

✅ Resize YouTube Video (Responsive 16:9)

```html

<!-- BEGIN YOUTUBE VIDEO -->

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">

  <iframe src="https://www.youtube.com/embed/mCiAL3ZcyZ0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen>

  </iframe>

</div>

<!-- END YOUTUBE VIDEO -->

```

✔ Fully responsive

✔ Maintains 16:9 ratio

✔ Clean structure

---

✅ Resize Uploaded Video !important

```html

<!-- BEGIN Uploaded Video -->

<style>

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

</style>

<div class="video-container">

  <object class="BLOG_video_class" contentid="41c1731f2300b094" id="BLOG_video-41c1731f2300b094"></object>

</div>

<!-- END Uploaded Video -->

```

✔ Cleaner class name

✔ `!important` ensures Blogger doesn't override

✔ Fully responsive

---

🔥 Even Better (Optional – Cleaner Global Version)

If you use videos often, you can define the CSS **once** in your theme and reuse it:

```html

<style>

.responsive-media { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }

.responsive-media iframe, .responsive-media video, .responsive-media object, .responsive-media embed { position: absolute; inset: 0; width: 100%; height: 100%; }

</style>

```

Then reuse it like this:

```html

<div class="responsive-media">

  <!-- iframe / object / video here -->

</div>

```

---