Responsive Embed

HTML & CSS
1

I have A bootstrap responsive embed video but it is not showing on my
page: under “Video” box

  <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://youtu.be/mKt-MDwtVB4"></iframe>
</div>
2

I have changed the code you to that below (the HTML changes are to the iframe. What you need for an iframe is to set the width and height.

<div class="box_images"><div class="embed-responsive embed-responsive-4by3"><iframe width="560" height="315" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/mKt-MDwtVB4"></div></div>

On the CSS I have made the following changes:
On the box_images I have removed the display:table;
On the embed-responsive I removed the height:0;

I can now see the video on the page. I hope this helps

1 Like
3

it seems I updated some files after you did this by accident It is not showing still.

4

The youtube URL posted by quizical plays. Your URL does not. Change your UTL to the full URL posted by quizical.

Likewise, Comment out .box-images {display:table}
Comment out .embed-responsive {height:0}
and
Change .box-images {padding-left:15px} to {padding:0 15px}

It should play.

5

I need some of this code that ill have to name it something else to
reveal the video.

6

I’m not sure what you said, but it sounds like you will get back to us after you’ve made some changes and if you need more help.

1 Like
7

LOL yeah I will

8

now I just get his huge empty box:

1263×777 28.6 KB

9

And that is trying the same video URL as in quizical’s example?

If you are trying different, it might be one of the “no embed” ones.

10

Yeah

11

Are you sure? The URL is different between his version and your original post…easy to miss

12

No I am using his now it still does not show.

13

Details matter.

Change “class”:

<iframe class="https://www.youtube.com/embed/mKt-MDwtVB4">

To “src”:

<iframe src="https://www.youtube.com/embed/mKt-MDwtVB4">
3 Likes
16

I want to change the height and width of the video, it is pretty big right now
If I change it here would it affect the responsive scaling?

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;

}

17

Try this:

.video-box {
    width:80%;    /* ADD Me */
    margin:0 auto;   /* ADD Me */
}

Yes, scaling will be affected as the viewport width changes. At the narrowest widths, this width could be changed to {width:auto} in a media query.

1 Like
18

Is it possible to add a “poster” image in a <iframe> tag like in the <video> tag?

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
19

What happened when you tried it?

1 Like
20

I don’t believe so.

Here’s what I did.

First, I looked up the video tag:

or

Read the descriptions to find out what the attributes for this tag are.

I see the “poster” attribute for presenting an image while no video data is available.

Then I looked up the iframe tag:

http://www.w3.org/TR/html-markup/iframe.html
or
http://www.w3schools.com/TAGS/tag_iframe.asp

Read the descriptions to find out what the attrributes for this tag are.

I don’t see anything like a “poster” attribute might render an image like you see in the video tag and I do not know of any “workaround” techniques for doing so.

21

Isn’t / wasn’t the object tag meant to accommodate the usual iframe use?

22

Did not work with it.