Videos. Adding Videos to a Web Page Videos can make our pages more interesting and engaging. Most video-hosting services, such as YouTube, will provide.

Slides:



Advertisements
Similar presentations
PART IV - EMBED VIDEO, AUDIO, AND DOCUMENTS. Find a video on Youtube.com: Search for a video, then look for the Embed code. Copy this code into the HTML/JavaScript.
Advertisements

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Whats New in Office 2010?. Major Changes in Office 2010 The Office Ribbon, which first made its appearance in Office 2007, now appears in all Office 2010.
Embedding Multimedia Bronze Level – Optional. Contents Embedding from YouTube Uploading to the Media Server Embedding from the Media Server Copyright.
In the top left corner of the page, click on Pages & Files. Click on the If Then Statements folder to select it. Click New – Create a Page. You can also.
Different Streaming Technologies. Three major streaming technologies include:
Images By Tara Frieszell By Tara Frieszell. Adding images to your website will make it more interesting and add to the design. However, some viewers aren’t.
My Workspace Profile. Using the course menu, click on Profile.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
Review of last session Logon – username = l4luser02 – l4luser16 Logon – username = l4luser02 – l4luser16 Password = Startnow1 Password = Startnow1 Fill.
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
CHAPTER 8: Enhancing a Website Session 1. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your.
Embedding Videos. Adding Videos to Our Website: Videos can make our pages more interesting and engaging. Most video-hosting websites, such as YouTube,
How to add a Wevideo project to you Jimdo Homepage Frontier EMST.
Creating your Webpage with tables. This is a 2 column by 1 row table!
 In My.Wartburg you can add…  YouTube Videos  Films on Demand (Vogel Lib.)  Internet Pages With a Video  Anything with a URL (
1 Chapter 2 & Chapter 4 §Browsers. 2 Terms §Software §Program §Application.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
1. Add your Name and to the First Page of the wiki:
A Step by Step Guide How to add your own pages to the website.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Adding Documents to OnCourse. Add a Document Look for the Documents tab and click it.
Review of last session Add text to your website Add text to your website Title Title Paragraph Paragraph Title and paragraph Title and paragraph Add photographs.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
Create Your Own Webpage. Today’s Class Internet Safety & Privacy Tables Embedding music and video Frames.
Link to a video Click here to see a moviehere. Insert video.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
Level 1 Tutorial Project How to put a movie player on your Weebly website using an HTML code.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
Highly Confidential – for UCRE Affiliate Use Only 2015 Regional Training Embedding Maps into your listings on your United Country office website.
Videos, the More Tag, Permalinks, and Shortlinks.
Inserting Flash Videos SharePoint 2007 By Joseph Risi.
Creating Webpages. Today’s Topics Embed video Embed music More text formatting Wordpress.
PREZI PRESENTATION Adding files (images, videos, sounds)
Compare and Contrast : Blackboard & a Personal Web Page www3.ltu.edu/~s_schneider/howto/faculty.htm You’ll find this presentation (and another) here :
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring Forms, HTML5 layout.
How to embed a YouTube video – it’s as easy as 1,2,3!
Validation. What is Validation? Removing errors improves the consistency of how our pages look to a wide variety of browsers and devices. Ensuring that.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
Websites Creating Basic Course. What´s a website ? A website (or "web site") is a collection of related web pages, images, videos or other digital assets.
Create Course with video lesson. Course Coverage What covered in this course? Video lesson creation – Using external site embed iframe tag – Using third.
Embedding Videos and Slideshows. (Click on any question you have to go directly to the answer, while in presentation mode)
Instructional Design Center Embedding Google Documents in Blackboard.
How to Create a Blog for Your Classroom Aka—Technology that will be really helpful in communicating with students and parents!
 Open the course to add an online class  Click on Add a Page (left side)  Type in a name  Click on Create  Click on the Content Tab  Click on Add.
Advanced HTML Tags:.
Dreamweaver – Setting up a Site and Page Layouts
Weebly Elements, Continued
Using Panopto to Record Presentations
Validation.
Videos.
Intro to Dreamweaver Web Design Section 8-1
Using the HTML and CSS Validation Services
4Schools Adding a Web Page.
ClubRunner Tutorial Home Page Stories.
Simple steps of using Google Earth to prepare Field Study report
Validation.
Client-Side Internet and Web Programming
Basic HTML and Embed Codes
How to Embed Videos into Powerpoint
Basic Steps: Set up account, log in Select theme (colors, tabs)
Welcome to 2013-and Technology in the Classroom by Tim Rhodes
ClubRunner Tutorial Home Page Stories.
Presentation title here
Lesson 4 Creating a page with Web Matrix
Videos.
Embedding Videos.
HTML5 Audio & Video By Derek Peacock
Presentation transcript:

Videos

Adding Videos to a Web Page Videos can make our pages more interesting and engaging. Most video-hosting services, such as YouTube, will provide us with HTML code ready to copy and paste into our web page. Video-embedding code provided to us might not be XHTML valid, requiring us to make some small changes before the page will pass validation. Placing videos into our web pages is not as complicated as it might seem: We also have the option to use our own video files directly on our web pages, but that comes with a number of technical challenges. For this course, we'll only use videos available on YouTube.

YouTube Video To place a YouTube video into a web page, we first go to the page for the video itself: Now we can click on Share to view the instructions on how to add it to our own site.

YouTube Video To get the "copy and paste" code, we now click on the Embed option.

YouTube Video Now we can copy the HTML code provided and paste it directly into our web document. YouTube provides us with default dimensions of the video. We can modify those dimensions at this screen or later edit the width and height attributes directly in the code.

Embedding the Video Here we've pasted the YouTube code directly between two header elements on our page: One of My Favorite Videos: And now I'm moving on to something else... The code provided by YouTube will function correctly on a live web server, but if the web document is stored on a local computer, the video will not load. The workaround is to add " at the start of the src attribute value.

Validating the YouTube Code When we run the YouTube code through the XHTML validator, we get the following result: We can fix this just by deleting "allowfullscreen" from the code. This has no effect on the appearance or functionality of our web page but our document will now pass validation.