Videos.

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

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.
How to begin. Step 1 Create a free account with weebly by logging in with Facebook, or using an and password you choose.
Iframes & Images Using HTML.
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.
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.
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.
Highly Confidential – for UCRE Affiliate Use Only 2015 Regional Training Class Embedding maps on the listing page of your United Country office website.
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 (
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:
CIS67 Foundations for Creating Web Pages Professor Al Fichera Reference for CIS127 and CIS 137.
A Step by Step Guide How to add your own pages to the website.
Adding Documents to OnCourse. Add a Document Look for the Documents tab and click it.
Web Design (7) Images (1). Images and the Image Element Images can be placed in the flow of text..jpg,.png and.gif image files work in web pages The img.
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.
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.
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.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
 How to create a quiz and teacher code. 1)First find a video on Youtube or other video hosting website and copy the embed code (Video embed code pictured.
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.
Creating Webpages. Today’s Topics Embed video Embed music More text formatting Wordpress.
A New Page to Add-On Your Multimedia Page. Creating a New Page Open up a new Windows Notepad Click File > Save As > My Computer > “your flash drive” Name.
Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 4: Favicons Tables and.
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!
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.
Add Video Library in Company
Advanced HTML Tags:.
Getting Started with Dreamweaver
Dreamweaver – Setting up a Site and Page Layouts
Weebly Elements, Continued
Using Panopto to Record Presentations
Cristian Horta CMS & Applications Programmer Campus Web Office
Videos.
Intro to Dreamweaver Web Design Section 8-1
Using the HTML and CSS Validation Services
Learn HTML Basics Lesson No : 10
ClubRunner Tutorial Home Page Stories.
Simple steps of using Google Earth to prepare Field Study report
Playing Audio (Part 2).
Adding form and function to your ACEweb pages
Client-Side Internet and Web Programming
GET INVOLVED GET INVOLVED SPECIAL OLYMPICS MINNESOTA
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
Embedding Videos.
HTML5 Audio & Video By Derek Peacock
Presentation transcript:

Videos

Adding Videos to a Web Page Placing videos into our web pages is not as complicated as it might seem: 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. 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: <h1>One of My Favorite Videos:</h1> <iframe width="420" height="315" src="//www.youtube.com/embed/PnJo7d-xBjY?rel=0" frameborder="0" allowfullscreen></iframe> <h2>And now I'm moving on to something else...</h2> 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 "http:" 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: <iframe width="420" height="315" src="//www.youtube.com/embed/PnJo7d-xBjY?rel=0" frameborder="0" allowfullscreen></iframe> 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.