Skip to main content
D
DWuser973
Known Participant
September 20, 2020
Question

How do I add non Flash video to a webpage

  • September 20, 2020
  • 2 replies
  • 464 views

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

Thanks

 

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    September 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

     

      D
      DWuser973Author
      Known Participant
      September 23, 2020

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

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      September 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
      D
      DWuser973Author
      Known Participant
      September 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

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