how to make an embed with width and height fixed responsive?

Asked

Viewed 460 times

1

Someone knows how to make this embed responsive, I can’t because it brings a width and a fixed height?

<iframe src="//vshare.io/v/f171731/width-470/height-305/" width="470" height="305" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> <p>
  • 1

    Please ask a full question in a way that is simple your question.

2 answers

-1

You can embed-Responsive if you’re using bootstrap or this css:

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper object,
.videoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Following this idea you will use:

<div class="videoWrapper"><embed ...>

-1

could create a class that would contain the embed, and set the value you want (height and width) then put overflow:Hidden, and in the embed, put centered on the parent div. I know it is not the best way, because it would cut part of the embed, but it has another form that is change in the element by style online (that <embed style="width: tal; height: tal;"> ), online because it is the one that will not suffer external changes as it is applied directly on site

Browser other questions tagged

You are not signed in. Login or sign up in order to post.