embedded bbcode videos getting out container in smart phones

[Blackhorse]

Hello,

I have made a bbcode for archive videos, it works fine on desktop. But on android smart phone, it is very large and getting out the post container as shown in the picture.


How could I make it within the container?
Thank You

[glennrocksvb]

It's because you're hardcoding the width of the iframe to 640 or whatever value you are using. Try also adding style="max-width: 100%" to set the maximum width up to it container only.

That's untested code. It would be easier to suggest a solution if I could see the actual page so I could inspect the HTML and CSS.

[Blackhorse]

It's because you're hardcoding the width of the iframe to 640 or whatever value you are using. Try also adding style="max-width: 100%" to set the maximum width up to it container only.

That's untested code. It would be easier to suggest a solution if I could see the actual page so I could inspect the HTML and CSS.

Thank You so much, Glenn,

You are right, and I have solved this by adding div to the bbcode and then through css I was able to make it to its container.

Here is the old bbcode:
<iframe src="https://archive.org/embed/{param}" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe>

This is the new with div:
<div class="video-container"><iframe src="https://archive.org/embed/{param}" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe></div>

and this is the added css:
/*Make archive bbocde Videos responsive*/
.l-small .video-container {
position:relative;
padding-bottom:52.5%;
padding-top:30px;
height:0;
overflow:hidden;
}

.l-small .video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.l-xsmall .video-container {
position:relative;
padding-bottom:52.5%;
padding-top:30px;
height:0;
overflow:hidden;
}
.l-xsmall .video-container .video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@media (max-width:320px) {
.l-xsmall .video-container {
position:relative;
padding-bottom:52.5%;
padding-top:30px;
height:0;
overflow:hidden;
}
.l-xsmall .video-container .video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
}

Should I also add this to additional css?
style="max-width: 100%"

Also, the credentials of site sent to You, to check please and recreate any time.

Regards,

[glennrocksvb]

If you already solved it with the code you provided, then you don't need to add the code I suggested.