CODEWITHSUNDEEP
htmlcsswordpress
Miguel
Miguel

Reputation: 11

Resize video to fit on mobile screen

I was wondering how you can resize a video so it fits on a mobile screen. The video fits fine on the computer, but on mobile the video is too large and it is cut off. What should I do?

I am using Avada theme on WordPress.

My website: http://dcnytours.com

Upvotes: 1

Views: 5504

Answers (2)

Andrey
Andrey

Reputation: 702

Limit iframe so it doesn't go out of view:

#post-10 iframe {
max-width: 100%;
}

You could also make it a little bit bigger just for mobile:

@media only screen and (max-width: 735px) {
#post-10 .fusion-column-wrapper {
padding: 0;
margin: -20px;
} }

Upvotes: 2

Geenkaas
Geenkaas

Reputation: 46

You need to wrap your iframe in a div and add some styling to it. Your html would be simple like so:

<div class="videowrapper">
    <iframe ...>
</div>

You also need a little bit of css to make the wrapper responsive and the video fill that wrapper:

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videowrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

check out this fiddle to see it in action. The container width decides the video width and it will scale (in a 16:9 format, adjust the top padding for another format)

JSFiddle

You might want to add the videowrapper class to the

tag in the fusion-text div in your example, but it might ask for some creative padding margins...

Upvotes: 0

Related Questions