How do I add non Flash video to a webpage

Report · Sep 20, 2020

I'm just looking to add an Mpeg or Avi video to a web page. any help is greatly aprreciated.

Thanks

Report · Sep 20, 2020

MPEG and AVI are not suitable for the web. You need a compressed file format that doesn't consume too much bandwidth. For best cross browser results, convert native media to MP4 or M4V for video, or MP3 for audio.

If you don't want to host the media files yourself, upload it to YouTube and paste the YouTube embed code into your web page. This is an example of embedded YouTube video in 4 aspect sizes using Bootstrap's responsive framework.

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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>
<!--Search form-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>


<div class="container">
<div class="row">
<div class="jumbotron mx-auto">
<h2>Bootstrap 4 in Dreamweaver</h2>
<p>Responsive video deomonstration.  This uses YouTube but any MP4 video will work. </p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<footer>Footer goes here.... </footer>
</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://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Post back if you have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 21, 2020

Thank you so much for your reply

Is there an easier way to add an MP4 video to a webpage without dealing with code?

If I go to Insert: HTML I can insert a Flash Video.. that's easy enough

Can I use any of the other commands under Insert: HTML such as Plugin to insert my video without dealing with code?

Thanks again

Report · Sep 21, 2020

Which version of DW do you have? In Dreamweaver CC, go to Insert > HTML5 Video. Use your Properties Panel (Ctrl + F3) to fill in the video attributes. If you don't have a modern version of DW, you'll need manually code from the example in Jon's reply.

Nowadays, native browser APIs are all that's needed to playback MP4 or M4V video. A few years ago, we relied on Flash and other 3rd party plugins but those days ended when browsers quit supporting plugins. Flash Player will officially end 3 months from now on Dec 31st 2020.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 23, 2020

Thank you for your reply.

I have the latest version, I tried your steps and seems to be working okay, is there an advantage for using the code over using Insert > HTML5 Video?

Thanks again

Report · Sep 23, 2020

The code in my first reply is more advanced.

1. The layout is responsive.

2. The video's aspect ratio is maintained on any size device (mobile, tablet or desktop).

3. Video source can be YouTube, Vimeo or your own MP4 (your choice).

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 21, 2020

Now days, we use the HTML5 <video> tag with .mp4 files...

How to use <video> tags: https://www.w3schools.com/html/html5_video.asp

Convert video to .mp4: https://video.online-convert.com/convert-to-mp4

Report · Sep 23, 2020

Thank you for your response, the two links are very helpful

Report · Sep 23, 2020

in complement, I will add this link wich can be really helpfull sometimes

http://www.mirovideoconverter.com/

Adobe Community

How do I add non Flash video to a webpage