<HR>
<H1>ORIGINAL CODE</H1>
<!--ORIGINAL CODE-->
<object class="BLOG_video_class" contentid="828d7fa6f5aa052d" width="600" height="498" 
id="BLOG_video-828d7fa6f5aa052d" aria-label="Upload video"></object>
<HR>

<br>

<HR>
<H1>ALTERNATIVE "NOT WORKING" CODE</H1>
<!--ALTERNATIVE "NOT WORKING" CODE-->
<style>
.responsive-video{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 ratio */
  height:0;
  overflow:hidden;
}

.responsive-video object{
  position:absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;
  border:0;
}
</style>

<div class="responsive-video">
  <object class="BLOG_video_class"
          contentid="828d7fa6f5aa052d"
          id="BLOG_video-828d7fa6f5aa052d"
          aria-label="Upload video">
  </object>
</div>
<HR>

<BR>

<HR>
<H1>ALTERNATIVE "WORKING" CODE</H1>
<!--ALTERNATIVE "WORKING" CODE-->
<!--BEGIN Uploaded Video-->

<!--ChildPartSTART-->
<style>
.eh-box {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: auto;
}
.eh-box iframe, .eh-box object, .eh-box embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<!--ChildPartFINISH-->

<!--MainPartSTART-->
<div class="eh-box">
  <object
    class="BLOG_video_class"
    contentid="828d7fa6f5aa052d"
          id="BLOG_video-828d7fa6f5aa052d"
  >
  </object>
</div>
<!--MainPartFINISH-->

<!--END Uploaded Video-->
<HR>

ORIGINAL CODE

ALTERNATIVE "NOT WORKING" CODE

ALTERNATIVE "WORKING" CODE

Comparison of the Three Codes

Aspect	ORIGINAL CODE	ALTERNATIVE "NOT WORKING"	ALTERNATIVE "WORKING"
Purpose	Static embedded Blogger video	Attempt to make video responsive	Responsive Blogger video
Wrapper Container	❌ None	✅ .responsive-video	✅ .eh-box
Aspect Ratio Control	❌ None	✅ padding-bottom:56.25%	✅ padding-bottom:56.25%
Positioning Method	Default static layout	position:relative wrapper + absolute video	position:relative wrapper + absolute video
Supported Elements	Only <object>	Only <object>	<iframe>, <object>, <embed>
Width Handling	Fixed width 600	width:100% !important	width:100%
Height Handling	Fixed height 498	height:100% !important	height:100%
Overflow Handling	❌ None	overflow:hidden	overflow:hidden
Max Width Control	❌ None	❌ None	✅ max-width:100%
Center Alignment	❌ None	❌ None	✅ margin:auto
Blogger Compatibility	Works but not responsive	Often fails in Blogger layout	Fully responsive in Blogger

Why the ORIGINAL Code Works but is NOT Responsive

<object width="600" height="498">

Problems:

Fixed width and height
Video size cannot adapt to screen size
On mobile it may overflow the page

So it works, but it is not responsive.

Why the "NOT WORKING" Code Fails

Your second version is technically correct CSS, but Blogger sometimes breaks it because:

1️⃣ Missing support for Blogger's dynamic embed type

.responsive-video object

Blogger may internally convert the player into <iframe>, <embed>, or dynamic script injection. So the CSS does not apply in some cases.

2️⃣ Blogger rendering timing issue

Blogger loads the player after page render. Your CSS may apply before Blogger replaces the element, so the final video element doesn’t inherit the rule.

3️⃣ No max-width control

max-width:100%;

Without this, some Blogger themes limit container width.

Why the THIRD Code Works

The third code fixes multiple compatibility issues.

1️⃣ Targets ALL possible embed types

.eh-box iframe,
.eh-box object,
.eh-box embed

2️⃣ Proper responsive container

.eh-box {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

3️⃣ Absolute positioning inside container

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

4️⃣ max-width:100%

max-width:100%;

5️⃣ Blogger-safe wrapper

<div class="eh-box">

Visual Structure of the Working Code

DIV (responsive box)
│
└── VIDEO OBJECT (absolute positioned)

+--------------------------------+
| responsive container (16:9)    |
|                                |
|  +--------------------------+  |
|  |                          |  |
|  |        VIDEO PLAYER      |  |
|  |                          |  |
|  +--------------------------+  |
|                                |
+--------------------------------+

Summary

Code	Result
Original	Works but fixed size
Alternative 2	Responsive concept but Blogger compatibility issue
Alternative 3	Fully responsive and Blogger-safe

Main reason the third works:

✔ Supports multiple embed types
✔ Uses stable responsive container
✔ Works with Blogger's rendering behavior

Ultimate Responsive Video Code for Blogger (Blogspot)

<!-- BEGIN Responsive Video -->

<style>
.video-container{
  position:relative;
  width:100%;
  max-width:100%;
  padding-bottom:56.25%; /* 16:9 ratio */
  height:0;
  overflow:hidden;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}
</style>

<div class="video-container">

<object
class="BLOG_video_class"
contentid="828d7fa6f5aa052d"
id="BLOG_video-828d7fa6f5aa052d"
aria-label="Upload video">
</object>

</div>

<!-- END Responsive Video -->

Why This Version Is the Best

1️⃣ Works with all video types

iframe
object
embed
video

Supports Blogger uploaded videos, YouTube embeds, Vimeo, and HTML5 video.

2️⃣ Fully responsive width

width:100%

The video always expands to full blog width.

3️⃣ Correct aspect ratio

padding-bottom:56.25%

This creates a 16:9 ratio container.

Screen	Video Size
Desktop	900 × 506
Tablet	700 × 394
Mobile	360 × 203

4️⃣ Blogger-safe CSS

.video-container iframe, .video-container object

Prevents theme conflicts.

5️⃣ Compatible with Blogger HTML editor

No scripts. No advanced CSS. Only safe HTML + CSS.

Visual Layout

VIDEO CONTAINER (16:9 responsive box)
        ↓
VIDEO PLAYER (fills entire container)

+----------------------------------+
|                                  |
|          VIDEO PLAYER            |
|                                  |
+----------------------------------+

It always fills the width of the post.

Optional: Ultra-Clean Version (No <style> Repetition)

If you use many videos, place this once in your Blogger theme (before </head>):

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

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>

Then every post only needs:

<div class="video-container">
<object class="BLOG_video_class" contentid="828d7fa6f5aa052d"></object>
</div>

This makes much cleaner posts.

✅ There’s also a secret Blogger trick to make uploaded videos stretch to true 100% full‑width (even wider than the post column). Most Blogspot users don’t know it.

Full-Width (Edge-to-Edge) Responsive Video for Blogger

<!-- BEGIN Full Width Video -->

<style>
.fullwidth-video{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  max-width:100vw;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
}

.fullwidth-video iframe,
.fullwidth-video object,
.fullwidth-video embed,
.fullwidth-video video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}
</style>

<div class="fullwidth-video">

<object
class="BLOG_video_class"
contentid="828d7fa6f5aa052d"
id="BLOG_video-828d7fa6f5aa052d"
aria-label="Upload video">
</object>

</div>

<!-- END Full Width Video -->

What This Trick Does

Normally Blogger posts look like this:

| screen width |
|              |
|   POST AREA  |
|   --------   |
|   | VIDEO |  |
|   --------   |
|              |

The video is limited by the post column width.

With the trick

| screen width |
|              |
| VIDEO VIDEO VIDEO VIDEO |
| VIDEO VIDEO VIDEO VIDEO |
| VIDEO VIDEO VIDEO VIDEO |
|              |

The video becomes 100% screen width.

How the Trick Works

1️⃣ width:100vw

width:100vw;

vw = viewport width. The container becomes full screen width.

2️⃣ Horizontal repositioning

left:50%;
margin-left:-50vw;

This moves the video out of the Blogger post container.

3️⃣ Responsive ratio

padding-bottom:56.25%;

Maintains 16:9 video ratio.

Example Result

Device	Result
Desktop	Full width cinematic video
Tablet	Edge-to-edge
Mobile	Perfect full screen

Pro Tip (Most Bloggers Miss This)

You can add rounded cinematic corners:

.fullwidth-video{
  border-radius:14px;
}

Or add shadow:

.fullwidth-video{
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
}

This makes the video look much more professional.

ANDREAS TOMMY PARLAUNGAN MANURUNG

Search This Blog

CHAT GPT COMPARING CODE
WORKING and NOT WORKING CODE for RESIZING UPLOADED-VIDEO SCREENAREA into RESPONSIVE FULL-WIDTH

ORIGINAL CODE

ALTERNATIVE "NOT WORKING" CODE

ALTERNATIVE "WORKING" CODE

Comparison of the Three Codes

Why the ORIGINAL Code Works but is NOT Responsive

Why the "NOT WORKING" Code Fails

1️⃣ Missing support for Blogger's dynamic embed type

2️⃣ Blogger rendering timing issue

3️⃣ No max-width control

Why the THIRD Code Works

1️⃣ Targets ALL possible embed types

2️⃣ Proper responsive container

3️⃣ Absolute positioning inside container

4️⃣ max-width:100%

5️⃣ Blogger-safe wrapper

Visual Structure of the Working Code

Summary

Ultimate Responsive Video Code for Blogger (Blogspot)

Why This Version Is the Best

1️⃣ Works with all video types

2️⃣ Fully responsive width

3️⃣ Correct aspect ratio

4️⃣ Blogger-safe CSS

5️⃣ Compatible with Blogger HTML editor

Visual Layout

Optional: Ultra-Clean Version (No <style> Repetition)

Full-Width (Edge-to-Edge) Responsive Video for Blogger

What This Trick Does

With the trick

How the Trick Works

1️⃣ width:100vw

2️⃣ Horizontal repositioning

3️⃣ Responsive ratio

Example Result

Pro Tip (Most Bloggers Miss This)

Comments

Post a Comment

CHAT GPT COMPARING CODEWORKING and NOT WORKING CODE for RESIZING UPLOADED-VIDEO SCREENAREA into RESPONSIVE FULL-WIDTH

ORIGINAL CODE

ALTERNATIVE "NOT WORKING" CODE

ALTERNATIVE "WORKING" CODE

Comparison of the Three Codes

Why the ORIGINAL Code Works but is NOT Responsive

Why the "NOT WORKING" Code Fails

1️⃣ Missing support for Blogger's dynamic embed type

2️⃣ Blogger rendering timing issue

3️⃣ No max-width control

Why the THIRD Code Works

1️⃣ Targets ALL possible embed types

2️⃣ Proper responsive container

3️⃣ Absolute positioning inside container

4️⃣ max-width:100%

5️⃣ Blogger-safe wrapper

Visual Structure of the Working Code

Summary

Ultimate Responsive Video Code for Blogger (Blogspot)

Why This Version Is the Best

1️⃣ Works with all video types

2️⃣ Fully responsive width

3️⃣ Correct aspect ratio

4️⃣ Blogger-safe CSS

5️⃣ Compatible with Blogger HTML editor

Visual Layout

Optional: Ultra-Clean Version (No <style> Repetition)

Full-Width (Edge-to-Edge) Responsive Video for Blogger

What This Trick Does

With the trick

How the Trick Works

1️⃣ width:100vw

2️⃣ Horizontal repositioning

3️⃣ Responsive ratio

Example Result

Pro Tip (Most Bloggers Miss This)

Comments

Post a Comment

CHAT GPT COMPARING CODE
WORKING and NOT WORKING CODE for RESIZING UPLOADED-VIDEO SCREENAREA into RESPONSIVE FULL-WIDTH