placing animation and video in dreamweaver

Report · Feb 22, 2020

Hello,
I have having great difficulty. My training and earlier work in Dreamweaver was a very long time ago (before it was adobe...lol) so it makes sense. I used to be able to create a animated gif (with just layer visibility on and off) and then drag it in. I have been working with timeline in Photoshop and created a "video" but I can't place it in a Dreamweaver page. I am guessing this is an easy one but it is confounding me. I tried a png, a gif, and an mp4 I have some familiarity with a variety of adobe products if anyone has a direct approach to getting a timeline psd placed into a Dreamweaver page please share.... as useful as this was with macromedia I find it hard to believe that decades later its’ not much more convenient especially since it’s the same app family/platform…

Report · Feb 22, 2020

PSDs won't work on the web. You need a web-friendly file type like .mp4 for <video> or .mp3 for <audio>. In DW, go to INSERT > HTML > HTML5 VIDEO.

Recommended links.

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

Report · Feb 22, 2020

If you are already using Bootstrap for layout, add the responsive video classes to maintian proper aspect ratio. Below is a working code example.

<!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>
<div class="container">
<div class="row">
<div class="jumbotron">
<h2>Bootstrap 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>

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