Wednesday, 3 September 2014

Project One: Evoke redesign: Third page and video embedding

Today we learn't how to do video embedding for videos from both Vimeo and YouTube. I decided to make a third page for my website and link it to the "What's On" menu and embed a video from both YouTube and Vimeo.

It wasn't working at first for me but once I added "http:" in front of the link to the video it worked for me. For example: <iframe width="615" height="340" src="https://www.youtube-nocookie.com/embed/UpyXfuwFRsI"</iframe>. When you copy the link from YouTube or Vimeo it doesn't have the "https:" part in the code, you need to add this manually.

I also learn't that you need to put in some code after the link specific to each individual browser if you would like it to be able to be played in full screen. The code you need is as followed:
Google Chrome - ebkitallowfullscreen> and for Mozilla Firefox - mozallowfullscreen>.
An example of how this will look in the HTML code is as followed:  <iframe width="615" height="340" src="https://www.youtube-nocookie.com/embed/UpyXfuwFRsI" frameborder="0" webkitallowfullscreen></iframe>

Here are some screen shots of my third page that I have created with two videos embedded on it:


Video not working:



Videos working:


No comments: