Skip to main content
M
marcusl31866600
Participant
February 22, 2020
Question

placing animation and video in dreamweaver

  • February 22, 2020
  • 2 replies
  • 575 views

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…

    This topic has been closed for replies.

    2 replies

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