CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rung Ruoi
Rung Ruoi

Reputation: 59

I want to cancel the property when operating on mobile

<div class="col-sm-24 embed-responsive">
<iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe>    
</div>

.embed-responsive iframe {
    height: 185px;
    margin-top: -4%;
    padding-left: 7.5px;
    padding-right: 7.5px;
}

I want the height attribute does not exist on the mobile screen and the code I want

.embed-responsive iframe {
    /* height: 185px; */
    margin-top: -4%;
    padding-left: 7.5px;
    padding-right: 7.5px;
}

enter image description here

Upvotes: 1

Views: 68

Answers (2)

Nick G.
Nick G.

Reputation: 61

You can use CSS media queries to accomplish this:

.embed-responsive iframe {
  height: 185px;
  margin-top: -4%;
  padding-left: 7.5px;
  padding-right: 7.5px;

  /* Set whatever breakpoint you'd like - I'm using 680px here */
  @media only screen and (max-width:680px) { 
    height: auto;
  }
}

Upvotes: 0

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

Try using a media query this sort of thing has worked for me in the past.

@media only screen and (max-width: 768px) {
 .embed-responsive iframe {
   height: unset !important;
 }
}

Upvotes: 1

Related Questions