Solved
Resize video to fit screen (e.g. mobile phone)
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.
Best answer by TomG
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>
```
+27You 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>
```
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>```
+2Thanks 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>```
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.