Skip to main content
S
sharonk39116496
Inspiring
March 1, 2021
Answered

Responsive mpg video code - how to - Current Dreamweaver version

  • March 1, 2021
  • 1 reply
  • 1513 views

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)

   <div class="container-fluid">
          <div class="row mt-2">
                 <div class="col-sm-12 col-lg-12" paragraph_451 center mb-3" > 
                  <video src="images/Pheasant_Grove/unit_a/a-lower_level.MPG"   width="400"  controls>
                  </video>
                    <h6 class="text-dark">Lower Level  </h6>
                </div>
          </div>      
  </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. 
 

 

 

 

 

This topic has been closed for replies.
Correct answer Nancy OShea

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.


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.

 

1 reply

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
March 1, 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 


S
sharonk39116496Author
Inspiring
March 1, 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

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 1, 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
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices