How to make an iFrame based Video fit within a container DIV

HTML & CSS
1

Hello,

We want to allow members to embed iFrame based Videos into their discussions.
So when they attach a Video they can see a thumbnail of it next to the discussion window.
But the iFrame based Video keeps breaking out of the containing DIV.
You can see the page, Under development, here:

https://www.anoox.com/ask_answer/ask_discuss.php

So if you click on attach Photo buttons, you will see that Photo thumbnails uploaded will fit within their containing DIV. However, if you click on the Video embed button and embed an iframe based Video, say from YouTube with typical dims of: width=“853” height=“480”
you will see that it does NOT fit within the containing DIV and will break out.

So what is the CSS that would force the Video, no matter what its iFrame based width & height to fit within the container DIV?

Thanks,

2

What if I don’t want to spend time, if I had, doing that, but could answer your question if you linked to an example you already set up to show the matter?

That would be nice. :slight_smile:

3 Likes
3

Hi,
If by an example, you mean an example of a Video iframe code to embed, I thought you would just grab one from Youtube, etc. But here is one:

<iframe width="853" height="480" src="https://www.youtube.com/embed/gvZSpET11ZY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Now I hope Sitepoint wont make that into an actual showing Video. And will leave HTML code in place. If not then you know what to tdo :slight_smile:
Thanks,

4

Well it seems that Sitepoint does not show an iframe code! So just goto YouTube and right click on any Video and grab its embed code.
Thanks

5

It probably will if you preceed the code with three backticks on a line by themselves and succeed the code with three more backticks (after the code) on a line by themselves.
OR
Highlight your block of code and click the </> button in the menu.

1 Like
6

Fixed it :slight_smile:

2 Likes
7

Hi there WorldNews,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
#holder {
    position: relative;
/** these are the settings for a 16:9 aspect ratio iframe **/

    width: 64vw;
    height: 36vw;

/***********************************************************/
    margin: auto;
    border: 1px solid #000;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
 }

#holder iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border: 0;
 }
</style>

</head>
<body> 

 <div id="holder">
  <iframe src="https://www.youtube.com/embed/gvZSpET11ZY" width="853" height="480" allowfullscreen></iframe>
 </div>

</body>
</html>

coothead

2 Likes
8

Not the embed itself, the relevant html and your css affecting the embedded iframe. I.e.
the container of the embed.

Edit)
Never mind, @coothead already posted a solution. :+1:

1 Like
9

The code setup seems to be completely wrong with too many things to correct but the main reason the iframe is bigger than the container is because you have given it a greater width and height than its parent.

The iframe is contained inside this element.

#video_item {
	position: relative;
	width: 218.75px;
	height: 187.5px;
	margin-left: 10px;
	object-fit: cover;
}

Yet the iframe is much bigger than that!

You can try setting the width of the iframe to match the width of the parent.

e.g.

#video_in iframe{
width:100%;
height:100%;
}

Of course that assumes you have the correct aspect ratio setup.

Not sure why you have set it to 218x187px anyway.

See @cootheads code above for the proper way to do it and more information long ago here:

1 Like
10

Hi Coot,

So we adopted your code suggestion with some changes.
And it is working fine. Thanks.
Question: what is the point of:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
I removed it. But just curious!
Thanks

11

This link might convince you to put it back…

Using the viewport meta tag to control layout on mobile browsers

< offtopic >

As a matter of interest, is there any particular reason for you
ignoring the private message that I sent you on Sept 23rd
regarding this thread of yours?..

What is CSS for this Super Thick line?

< /offtopic >

coothead

1 Like
12

Yes, our Web Site is not currently Mobile friendly, aka done based on Responsive Design.
FYI, given the massive Scope of this Site and associated services, given that it is the integration of a Search engine & Social network, and limited resources we have given that we are non-profit, we ave not spend any resources to make the Site based on Responsive Design. But it is on the todo list.
And I did not get your PM! Or dont know where PMs go :slight_smile:

13

You can access it from the envelope icon in the Profile menu.

A green indicator shows against your avatar in the top righthand corner of the screen when you have an unread message (or messages).

message-notification

They also show up in your general notification list, and you receive an email notification (unless you’ve explicitly turned off that option).

14

Making a site, responsive and also Google Mobile Friendly maybe not the enormous task you envisage.

In one of your previous topics, reading and applying the proposed suggestion will solve the majority of the necessary changes.

How to make a DIV open and close slowly - #11 by John_Betong

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.