Videos, Icons, and Online Resources

During week eleven we how to take advantage of some free online resources to enhance the look of our site with icons and videos. Icons are images that can be entered as text in HTML so that you can style it just like texts end fonts in CSS. There are free icon resources online like Font Awesome and : you download the resources they provide, then simply get their CSS document (font-awsome.css) to add to your css folder. You also need to copy the entire Fonts folder to put in your root folder as it’s own folder beside the css, js, and images folders.

This file structure is impotent for the properly linking all the your documents to the main index.html page

With the documents in their proper folders simply link it in the Head of the HTML like your other style sheets with “<link href=”css/font-awesome.css” rel=”stylesheet” >” and then you can put it in your body as a class [as long as you know the name of whatever icon you want to post and put fa before the name (<span class=”fa fa-ambulance fa-4x”></span>) (<i class=”fa fa-flag”></i>)] that can all be found on their own respective websites.

Next getting videos on a website is fairly easy, but there are a number of things to take into consideration before doing so. First thing to note are the many different video formats that are online friendly (Current codec is .h264 and the new one is .VP8):

  1. Apples: .mov, .mp4 ,.mp3, .mkv, .m4A
  2. Googles: .webm
  3. Worst Quality (good for backup) : .OGG, .OGV, 3gp

Then you should decide weather to host the video or simply embed a video form a different website.

The advantage to hosting videos is that we have more control over how the video is displayed, but the downside is that it requires you to hosted the video on your own server. (taking up space and loading up slower) If you don’t have a video that you want to use, you can simply download one off You Tube with one of these methods .

  • Ether with a free plugin like Easy Youtube Video (then go on YouTubed and click on the download as button bellow the video and select the p (progressive) value).
  • Or with an online from a site, simply the YouTube video you want to download and copy the URL. Then go to a website that converts videos online like Keepvid and select the p (progressive) value.

With a usable video  on your computer, you are not ready to host it until you convert it into  .webm, .ogv, and.mp4 formats. This is so that users an Safari, Firefox, Google, and Microsoft don’t have trouble and you can convert your video with one of these three methods:

  1. Fire Fogg plugin: (For Firefox users)
    Go to the  Fire Fogg website  , install Fire Fogg and once the installation is complete click on the make web video link. Then find the from your computer, select the format, and click the Encode button. Once encoding is done you will find a new .webm file in the the same folder that you found the video on your computer.
  2. Free downloadable programs:
    Go to Miro Video Converter and download their free converter. After downloading the Miro Video Converter, open the application from your computer and click on “choose files.” find your file or files, drag and drop on the converter window and open up the format fly out menu, go to video and choose mp4 or whatever format you prefer and click the Convert Video button. Miro Video Converter will automatically save your converted video to the downloads forder so you will have to fish it out of there to place it in the appropriate folder.
  3.  Converting online:
    Go to Online Convert and just select what you would like to convert. You can convert images, document, audio files and so on, but for the purpose of this exorcise we selected video and then chose the format. After selecting a format like (.OGG for example) you will go to another page where you can click on the “browse” button bellow “upload your video you want to convert to OGG” and you will be promoted to find locate your video on your computer. Once you have found the folder click on the “Convert” button on the bottom of the page.

Now that we have a video converted into all 3 formats, (.mp4, .webm, .ogv) we are finally to post the video on our website. So I created the basic HTML file, with a link to a CSS style sheet in the Head and in the Body, I use video tags “<video></video>” and code <source src=”video/tron-trailer.webm” type=”video/webm” /> in the tags.

Now our video is in on our website but it wont play until you code in a command like autoplay with “<video autoplay></video>”, or loop with “<video loop muted></video>”, but the preferred method is to give our user the control by coding in  <video controls></video>. (The appearance of these controls will depend on the browser it’s being displayed on)

Now making hosted videos responsive is as simple as styling your video tags in CSS with video { width:100%; height:auto;}.

To embed You Tube videos just find the video you want on You Tube and then clicking on share bellow your video. In the share section click on the embed tab to copy and paste the i frame code provided into the Body of your HTML document.

To Embed Vimeo videos the process is similar, just find the video you want on Vimeo this time and then clicking on share button  and then in share window click on the show options tab to deselect all the intro options (Portrait, Tittle, and Byline) before copying and pasting the i frame code provided into the Body of your HTML document.

Basically any video streaming site that has provides an iframe code should allow you to embed their videos simply by copying and pasting the i frame code. But these videos that are hosted on other sites like You Tube and Vimeo  wont allow you to make them responsive withot the use of Java Script or J Query (simplified Java Script).

There are four steps to getting JQuery to make your videos responsive:

  1. Dowload J Query from the jQuery website and click on download button. Then click on the download the compressed, production jQuery 1.12.3 and click Command + S to save the .js file in its own js folder within the root folder.
  2. Then you can use FitVids java script from GitHub and put the .js file you download in the js folder with your other .js file.
  3. Then install the jQuery we downloaded by linking it in the head of your HTML document with “<source></source>” tags.
  4. Now that your jQuery is installed you need to apply it to the video by entering
    $(“.vidContainer”).fitVids();  });
    ” in your “” tags, just make sure that you wrap your videos in a “” tags with the same class you defined in they jQuery. in this case I named my class “.vidContainer

And now with JQuery installed we can make all the other content on our page more interactive as well simply by targeting the Jquery with other plugins. We can make our cover image more interactive for example by making it a flexslider. Simply go to FlexNav and download their flexnav jQuery. Then copy the in your js folder.

Then link both your flexslider stylesheet and your flexslider jquery bellow your JQuery link in the Head.

Thirdly add your flexslider to a div tag as an id. ”

The second last step is to put the get the hookup script and to put it in your Head, bellow your other two jQuery links.
$(window).load(function() {

Our flexslider is actually a fader and to make it an actual slider add
“$(window).load(function() {
        animation: “slide”,
        slideshowSpeed: 4000
    });//END FLEX
});//END LOAD”
after your .flexslider and between the brackets.

The last step is to Edit your flexslider css document to get the icons to appear on your flex slider.
Change them from this:
@font-face {
font-family: ‘flexslider-icon’;
src: url(‘fonts/flexslider-icon.eot’);
src: url(‘fonts/flexslider-icon.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/flexslider-icon.woff’) format(‘woff’), url(‘fonts/flexslider-icon.ttf’) format(‘truetype’), url(‘fonts/flexslider-icon.svg#flexslider-icon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}to this
@font-face {
font-family: ‘flexslider-icon’;
src: url(‘../fonts/flexslider-icon.eot’);
src: url(‘../fonts/flexslider-icon.eot?#iefix’) format(‘../embedded-opentype’), url(‘../fonts/flexslider-icon.woff’) format(‘woff’), url(‘fonts/flexslider-icon.ttf’) format(‘truetype’), url(‘../fonts/flexslider-icon.svg#flexslider-icon’) format(‘svg’);
font-weight: normal;
font-style: normal;

Just make sure the images are the same size or your flexslider wont work properly.

Text Area:
make and interactive textbox for comments with: (and i made it reveal when the mouse hovers over it) comments

and stylize it in CSS with:
#slideOut {
width: 200px;
background-color: #e5cd14;
position: fixed;
left: -180px; }


Relative positioning can move your image relative to where it actually is in the browser (no change to regular document flow) :
img {

absolute positioning moves the image relative to the document (changes the document flow).
img {

combinde relative and absolute positioning to layout your website:

#header {
height: 100px;
background-color: #6FF;
#navigation {
width: 300px;
height: 50px;
background-color: #22e322;
right: 0;
top: 20px;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s