From what I've seen on the few iOS and Android devices I've seen, the devices do an excellent job of reducing the web site to fit the screen, and allow the user to double-tap a section or table cell or div to enlarge it to full screen width for easier reading.
What you need to keep in mind is the difference between the tap of a finger and the click of a mouse. There is no hover on a device as there is when a mouse hovers over a link, so you can't expect a hover to work on a mobile device - which you've found out.
When you play a video, the video by default (not by extra coding on the developer's part) plays on the screen by itself, not on the web page. There's a button above the video the user taps to return to the page containing the video link.
<Alt> text can be seen on the device if the picture won't load, or before the photo appears, but the <title> tag won't because it depends on hover.
Drop-down option links are automatically converted to popups on the Android devices and a scrolling list on the iPhone at comfortable sizes for finger-tapping goodness. Radio buttons and check boxes are often too tiny and really need to be enlarged in CSS for smaller screens, or staggered 40-50px apart to help the user comfortably select the correct one. (Putting them in <li>s with text-decoration:none at 50px line-spacing helps.)
I hope these tips will help you get going.