HTML5 Video Code

Working with HTML5 video in Dreamweaver

Encode video to MP4, Ogg, and WebM format.

Follow these steps to create a new HTML file in Dreamweaver and add video and source tags:

Open Dreamweaver and an HTML file.

Switch to Code view or Split view.

Add the following code inside the <body></body> tags:

<video autoplay="autoplay" controls="controls" preload="auto"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> <source src="movie.webm" type="video/webm"> </video>

Notice that the video tag specifies three parameters that preload the video when the page loads, auto-play the video when ready, and show the browser’s native controls. Nested between the open and close video tags are three source tags. The source tags define the MP4 video source, the Ogg video source, and the WebM video source. The browser chooses the source it can support. Note that the MIME type must be included for full support across browsers, and the MP4 type should come first to support iPad.

Save the file next to your videos or in the location of your choice.

Update the src attribute in the source tags with the path to your videos.

For poster:

<video controls poster=”demo.jpg”>
<source src=”demo.mp4″ type=”video/mp4″ />
<source src=”demo.webm” type=”video/webm”/>
<source src=”demo.ogv” type=”video/ogg”/>
<p>Fallback code if video isn’t supported</p>/



Float & Clear with CSS

Use the following to prevent text inside the editable region under a div with a menu bar from floating up along side the menu bar as it adjusts inside a fluid layout:

Use the “Float” property to specify whether or not an element should float.

Use the “Clear” property to control the behavior of floating elements.

Float Property

The “Float” property can be used to wrap text around images.

Clear Property

The “Clear” property is used to control the behavior of floating elements.

Elements after a floating element will flow around it. To prevent this, use the “Clear” property.

The “Clear” property specifies on which sides of an element floating elements are not allowed to float.

So for the div that contains the menu bar, float the div to the left and set the clear to “right.”

(Must use both.)




Saving GIF Image In Photoshop For Mobile Website

Choose GIF 32 No Dither from the Preset drop-down list.


Fee Website Analysis Form Code

Here is code from Network Solution for form:

<a href=> Mansavage Productions Free Google Mobile Friendly Website Analysis</a>




Setting Viewport in Form

When the Google mobile-friendly test fails because viewport not set, and the code further down doesn’t work, then try:

<meta name="viewport" content="initial-scale=1">
and it worked for the form.



How To Create Custom PayPal Button (Code Factory)


<form target="paypal" action="" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JGPNM5E634B42">
<input type="image" src="" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="" width="1" height="1">


Find the following line of code:

<input type="image" src="" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

And replace it with:

<input type="submit" value="Add to Cart" name="submit" title="PayPal - The safer, easier way to pay online!" class="paypal_btn">


Paste the following into the .css file: (it will then show up as CSS Styles in All as .paypay_btn and .paypal_btn:hover

You can then make changes to the button appearance by clicking on “edit rule.”

The button will still bring up PayPal when clicked.

display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 14px;
margin: 0;
background: #ff6600;
border: 0;
cursor: pointer;
outline: none;
.paypal_btn:hover{ background: #e05c04; }

Linking page to link button inside of page

<div data-role=”content”>
<ul data-role=”listview”>
<li><a href=”#page2″>Welcome</a></li>


Paste inside of page containing the list button.


When Google Mobile Test Returns “Viewport Not Set”

Add the following code to head immediately before </head> tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>



Mobile Button That Calls Phone When Clicked

You can add a link on your jQuery Mobile webpage to directly call a phone number using the following format:

<a href=”tel:1234567890″ data-role=”button” rel=”external”>Phone: (123) 456-7890</a>

Be sure to put in rel=”external”.

When you click on the link, your phone app on your smartphone will be brought up with the number 1234567890 set.  All you have to do is hit “Call”  to make the phone call.  Try it out on your iPhone or Android phone!


Google Mobile-Friendly Test Site

Here is where to go to test a website for Google Mobile-Friendly: