How To Embed A Youtube Video In Dreamweaver

Add Video to Your Website with Dreamweaver CC

Video content is an essential function of web page blueprint today. Many people prefer to watch a brusk video rather than read content, such as learning how to refinish a table. With the evolution of HTML5 video tags, it is much easier to insert video on a page than it was previously. One large reward of the HTML5 format is that it does not require a plug-in to run a video. Other advantages include compatibility with most browsers and the power to use a keyboard to control the playback. To insert a video in Dreamweaver, select HTML5 Video on the Insert console or select HTML, HTML5 Video on the Insert card.

What do I need?

Download: travel_blog.zip

Pace 1 of vi

Define a site and open up the dwelling house page

Download the travel_blog folder, so extract the files.

Create a new website in Dreamweaver called Add Video Tutorial with your new travel_blog folder set as the local site folder.

Open the file alphabetize.html from your travel_blog folder. This page was created using the Dreamweaver starter template "Blog post".

https://blog.adobe.com/media_1dbba45fdaab25aa413ec26e74ce73ce456e22fa.gif

Step two of half dozen

Add a div to serve as a video container

The easiest way to insert and position a video on a page is to place it in a div tag. The div tag can then be assigned a course or ID that tin then be used to style and place the video content on the page. The video we are going to add to the index page is a video of playful elephants in an elephant rescue eye in Republic of botswana.

Open the alphabetize folio, and then select the last paragraph of text.

Select Insert on the Menu bar, select Div, and then select After in the Wrap Tag options.

https://blog.adobe.com/media_bc77ae39adddb03b4c53d970efe06cb3c9d7a22a.gif

Or open the DOM panel, select the Click to Add an Element icon next to the selected

element, select Insert After, then printing [Enter] (Win) or [Return] (Mac).

https://web log.adobe.com/media_87c0c8dab8c1e5bc2051deceefe08ff09891000c.gif

The new div tag appears on the page with placeholder content.

https://blog.adobe.com/media_7584d9bcddf6a3e90fcefc86cec2f61577bc539a.gif

Stride iii of half dozen

Insert a Video

At present that you have the div in place, you tin can insert the video content inside information technology.

Select the placeholder content in the new div, select the Insert panel to aggrandize or bladder it, then select HTML5 Video.

Choose Nest from the Wrap Tag options.

https://blog.adobe.com/media_8c7937577f603951561bf41f925ac5fd49095f06.gif

A video tag is inserted inside the originally selected div, with the placeholder content for the div to the side of the video placeholder. A controller appears at the bottom of the video placeholder for video playback. You lot tin can use the play button to play the video, drag the playhead to advance the video, pause the video, and utilize the speaker to command the audio volume. There is besides a full screen push to overstate the video to total screen.

https://weblog.adobe.com/media_7631fb722bf1970a936ac71a8a14cdf2b7c09a1a.gif

With the Video Placeholder selected, select the Browse for File button next to the Source text box in the Property inspector, and then browse to notice the file elephants.mp4 located in the website assets binder. (If you don't see the Property inspector, select Window on the Menu bar, then select Backdrop.)

https://web log.adobe.com/media_49be72e536a83ef61f1b17c6bacb2e6b3dbdbe97.gif

Step 4 of six

Edit the Video Height and Width Backdrop

The video appears in the div now, only is much too big for the folio. You lot can change the Width and Height properties in the Property inspector. The standard aspect ratios for videos are Widescreen (16:9) and Standard (four:3). Setting the width and superlative of the video will permit you to control the size on the page. Since nosotros are going to utilise the Widescreen format, nosotros demand to enter pixel measurements with a 16:9 relationship. The width must be divisible by xvi and the tiptop must exist divisible by 9, with both operations resulting with the same number. A width of 320 is evenly divided by xvi with a event of 20 (320/16 = 20). To find the tiptop, multiply 20 past 9 to arrive at a height of 180. (180/ix = twenty) keeps the aspect ratio correct.

Place the insertion indicate in the W (width) text box on the Property inspector, then enter 320.

Place the insertion signal in the H (height) text box on the Property inspector, and then enter 180.

The video is now resized to fit on the page. Save your work.

https://web log.adobe.com/media_7e5a3ba09caf9c8db17898f3ed8593060f41738b.gif

Pace 5 of 6

Add together Alternate Sources for a Video

To insure that a video will work across all browsers, it is a skilful idea to add together alternate video formats as alternatives for browsers who may not be able to play the original source file format. The three video formats supported by the HTML5

tag are MP4, WebM, and Ogg. Chrome, Firefox, and afterward versions of Opera support all 3 formats. Internet Explorer and Safari only support MP4.

When yous supply more than than one video file within the

tag, a browser will play the first one listed in the lawmaking that it supports.

Tip: A quick way to convert a video file format is a complimentary service provided by video.online-convert.com.

With the video placeholder selected, select the Browse for file button side by side to the Alt Source 1 text box to locate and select the elephants video with the webm file extension.

Add the elephants video with the ogg file extension in the Alt Source two text box.

Save your work.

https://blog.adobe.com/media_7abc37466945910d23756b5903b202d64d40bbfe.gif

Step vi of 6

Position the video on the folio

At present it's time to improve the appearance of the video on the page. We'll showtime by placing our own text in the div to draw the video.

Double click the placeholder text to enter edit mode, then replace the placeholder text with One of the highlights of the trip! Jabu, Thiembe, and Marula!

https://weblog.adobe.com/media_2a21b85968d7e3b58cf2ef5d58d18e08ba0ce1e2.gif

Next, we'll assign a form to the div to add formatting.

Select the Add Form/ID push in the Element Display, type videoDiv for the Class name, press [Enter] (Win) or [return] (Mac), then select blogPostStyle.css for the source.

https://web log.adobe.com/media_dd815900cd816a2da21fc9f26a57d221934dae3c.gif

Open the CSS Libraries console, select blogPostStyle.css in the Sources pane, then select .videoDiv in the Selectors pane.

Uncheck the Prove Set checkbox in the Properties pane if necessary, and then select the Text button in the Properties pane.

Select a font-family of your choice. I selected the Gotham font-family unit.

Set the text-align property to center, then select the Layout push button in the Properties pane.

Set the layout width to 96%, select the Show Fix checkbox to bear witness only the videoDiv set properties, then relieve your work.

https://blog.adobe.com/media_e31d73bef342b5cb0b92e52eab17ca94fd1885bf.gif

Your folio should now look similar to this:

https://blog.adobe.com/media_ccca50c540dc1ad9a52268d211b4e4f82507dccf.gif

Select the video image, select the Add Class/ID button in the Chemical element Display, type featureVideo for the Class name, press [Enter] (Win) or [render] (Mac), and so select blogPostStyle.css for the source.

Select blogPostStyle.css in the CSS Designer Sources pane, and then select .featureVideo in the Selectors pane.

Uncheck the Show Set checkbox in the Backdrop pane if necessary, and then select the Layout button in the Properties pane.

Select the cake display, then set the right and left margins to auto.

Double-click the sentence under the video to enter Edit Mode, add together a line break before the offset word and after the start sentence, so relieve your work.

https://blog.adobe.com/media_d2591b6988e41309e0386c3857b97085da0aa1e8.gif

Your video should look similar to this:

https://blog.adobe.com/media_5a786beb7b83ae3e9dffea9b7d05c67efd11e318.gif

Here is the finished page:

https://blog.adobe.com/media_89220c29f0250d152bd9386c33e1ff6e0a862df4.gif

Summary

This tutorial led you through the steps to insert a video on a web page using the HTML5

tag. You began by defining a site using the data files provided.

After you inserted the video, you added code to size the video using the xvi:9 attribute ratio. Next, yous added two alternating versions of the same video with two different formats. This is advisable in guild to provide a file that can be recognized by the well-nigh common browsers used today.

Last, you lot added some formatting to position the video on the page by defining 2 CSS classes and setting properties for each one.

Every bit you work, it is of import to view the piece of work in progress using tools as the Scrubber, the Window size menu, the Visual Media Queries bar, and Device Preview.

Source: https://blog.adobe.com/en/publish/2016/07/28/add-video-to-your-website-with-dreamweaver-cc

Posted by: ludlumtrabut.blogspot.com