Highlighted

placing animation and video in dreamweaver

New Here ,
Feb 22, 2020

Copy link to clipboard

Copied

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…

Topics

How to, Import and export, Publish

Views

322

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

placing animation and video in dreamweaver

New Here ,
Feb 22, 2020

Copy link to clipboard

Copied

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…

Topics

How to, Import and export, Publish

Views

323

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Feb 22, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 22, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...