Resize video to fit screen (e.g. mobile phone) | XM Community
Solved

Resize video to fit screen (e.g. mobile phone)

  • 25 April 2018
  • 5 replies
  • 583 views

Hello everyone,
Is it possible to resize videos (from file library, not YouTube) to fit the screen of the device respondents are using? Currently, when viewed from a mobile phone, the size of the video is too large and will be cutoff. It only fits the screen when viewed in fullscreen mode. Thanks in advance.
icon

Best answer by TomG 25 April 2018, 16:03

View original

5 replies

Userlevel 7
Badge +27
You can check what type of device you have and set an embedded variable for the width, then pipe it into the html5 `<video>` tag.
```
<video id="myVid" controls="controls" autoplay="autoplay" width="${e://Field/vid_width}">
<source src="https://mydomain.com/myVid.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
```
I will give that a try thank you!
We also use a custom`<div> `class with CSS to resize all our videos to fit the mobile view. This works really well for videos and images that we load.

HTML:
```<div class="video-container> <!-- add your iframe or image here --></div>```

CSS (add under Advanced in Look& Feel:
```<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>```
Would appreciate other inputs.
Badge +2
Thanks for the answer! I saw that the HTML code had a bit of typo (lacking a double quote after `video-container`)--I'm correcting it here:

HTML:
```<div class="video-container"> <!-- add your iframe or image here --></div>```

Leave a Reply