Responsive mpg video code - how to - Current Dreamweaver version

Report · Mar 01, 2021

I have a several mpg videos made in the early 2005's, showing a house built by a contractor. I want to post them on his website and have them responsive to be seen on a phone, ipad, or computer. Video will show on a laptop computer, but on an ipad or iphone they show as a black rectange with a grey triangle in it with a grey line through the triangle.

I tried many code examples, but here is the current one:

running current version of Dreamweaver with bootstrap 4

css:

.container-fluid {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
text-color: #000000;
align-items: center;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"Helvetica, Arial, "sans-serif" ;
background-color: #FAFAFA !important;
justify-content: center;
}

.paragraph_451 {

max-width:400px;

width:95%;

height:auto;

margin-left:auto;

margin-right:auto;

text-color:#000000 !important;

background-color:#E2E2E2 !important;

border:1px black solid;

color:#000000 !important;

align-items:center;

}

.video {
max-width: 100%;
height:auto;
}

(not sure if it should be .video or no dot, but neither way works)

</video>

<h6 class="text-dark">Lower Level </h6>

</div>

not sure if it should be " width = "400" controls. or just 400 controls. neither option worked.

I would appreciate any advice or anyone pointing me in the right direction. As you can see, I cannot figure this out, and have been working on it for a couple of weeks. thanks much.

Report · Mar 01, 2021

None of the code you posted has much to do with whether your videos will play, or error out as an unknown file type (what you're describing).

For full browser and html5 compatibility, convert the videos to the .mp4 file type. All modern browsers read .mp4 by default in their native video players.

There are tons of free video conversion tools online you could use to do it.

I've used this service in the past: https://cloudconvert.com/mpeg-to-mp4

Report · Mar 01, 2021

I appreciate the helpful suggestion. I will try that.

If I substitute the new mp4 file in above code, you think that code is OK?

I was confused with iframes, embeds, video-responsive, etc.

thanks

Report · Mar 01, 2021

Are you using Bootstrap responsive framework for your layout? If yes, which version #?

What is the aspect ratio of your self-hosted video -- 1:1, 4:3, 16:9 or super wide 21:9?

With that information, I can provide you with the correct responsive embed code to use for your video.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 01, 2021

I have the current Dreamweaver with bootstrap 4.4.1.css on my computer and to tell the truth I get confused as to when I am using Bootstrap and when I am using Html5.

I have the page laid out in section, container-fluid, rows, columns. I use bootstrap buttons.

The mpg files I have are from 16-17 years ago and I have no idea on how to find the aspect ratio. That was one of the confusing things. These video files run fine on a large screen, but they will not be responsive. So maybe if I convert them to mp4 like the man above suggested I would find out an aspect ratio? I am not sure if I convert to mp4 if I have then created a youtube file or if I just get a file back on my computer. You can see I am totally in the dark here.

thanks for helping.

Report · Mar 01, 2021

Responsiveness comes from your layout, not your video file.

After you convert your video file(s) to MP4, try this HTML code in a new document.

Note: I'm using the latest Bootstrap 4.5.2 from CDN for this demo.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Demo  version 4.5.2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
</div>
</nav>

<div class="container-fluid">
<div class="row">
<div class="col">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<!--CHANGE PATH & FILE NAME TO YOUR OWN-->
<video title="Your Video Title" poster="path/YOUR_POSTER_IMAGE.jpg" controls="controls" >
<source src="path/YOUR_VIDEO_FILE.mp4" type="video/mp4">
</video>
</div>
</div>
</div>

<hr>
<div class="row">
<div class="col">
<footer>Footer goes here.... </footer>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Post back if you have questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 01, 2021

Thanks Nancy.

I feel encouraged. I appreciate your help. Will post back if I need help. Its so good of you and everyone else to help people. I like to read other peoples questions too.

Report · Mar 02, 2021

Your code for Bootstrap 4.5.2 worked perfectly with the Bootstrap 4.4.1 used on my computer.

Thanks so so much for taking the time to help.

Report · Mar 02, 2021

You're very welcome. So glad it worked for you 🙂

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 01, 2021

"I was confused with iframes, embeds, video-responsive, etc."

I can understand that, you're kinda mushing a lot of stuff together there...

iframes: used to bring content not under your control onto your site. External video or even full pages can be added in an iframe, though there's not much need for them and they tend to be less than optimal for responsive sites.

embeds: I assume you mean the old <object><embed> method of adding videos. It's of zero use these days, since all browsers now understand the html5 <video> tag and will play the correct file types without issue. Don't worry about it anymore, it is a relic of the past and can stay there

video-responsive: I'm guessing this is a Bootstrap class to make the video responsive using Bootstrap's prefab code so it scales up and down to fit the browser window? If so, there are a few people here who use BS regularly and will be able to point you in the right direction after you get the videos to display.

Now, onto the code...

Don't use HTML width attributes (actually, there aren't many html attributes in general that you should use when CSS could be used instead). Widths should be controlled in your CSS in a selector that styles your video. However, if you're using bootstrap's responsive classes, it's probably best to leave width off entirely and allow BS to do its job. Bootstrap has something for everything in it, and should be used for everything, if you're using it at all. Personally I don't use bootstrap, I prefer my own code.

The controls attribute can be left in your video tag as just "controls" (without quotes) or it could also be written as controls="true" (with the quotes), either way works fine under html5.

If changing the file type gets your videos to display, and you still need help with your code, post back and one of the resident Bootstrappers will be able to walk you through what you need to do to get your videos to be responsive. It is best to upload your page to a website you control then post a link to your work in progress here so we can see the entire code affecting your site. That way, the contributors can elimiate problems before a suggestion mucks up something further down your page.

Report · Mar 01, 2021

thanks for your comments. It does help to have a better understanding of what I am trying to do. When I google "responsive video" I get things mainly from 2016, and I cannot determine which way to go. So I appreciate your help

Report · Mar 02, 2021

To all of you that helped me....huge thanks.... my code is working.

Adobe Community

Responsive mpg video code - how to - Current Dreamweaver version

1 Correct answer