Newscoop 4.4 Cookbook
Embedding YouTube, Vimeo, etc.
If you want to include streams from Twitter, Flickr or Vimeo, relax. Just copy and paste their code into your templates. No magic. You don't need to install any widgets or plugins to do this. Just use their embed code. If you want to embed a YouTube video, just copy the embed code into your WYSIWYG editor and save. Done.
Now we cleared the air, and can dive into more interesting ideas...
Video embedding in custom sizes
You can copy and paste embed code into your article without any problems. If you follow the examples below, you will get an idea how you can have more control over the layout in the template - and possibly embed the same video in different sizes, depending on where it is shown. Also, you might not want to include embed code inside the article body for various reasons, like delivering to different platforms and devices, or copyright.
Vimeo video embed from video ID
In this example the journalist copies and pastes the video ID from the vimeo URL into the article. The template will check if a video ID is given, and then create the embed code accordingly - you can control the size in the template. If you take the video embed code from vimeo, it starts like this:
<iframe src="http://player.vimeo.com/video/12790651?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
If you compare this with the URL, you see that the video ID is the last part of the URL:
http://vimeo.com/12790651
The value the journalist has added to the article is 12790651 in the field vimeoid. Now you can create the embed code like this:
{{ if $gimme->article->vimeoid|strip_tags|trim !== "" }}
<iframe src="http://player.vimeo.com/video/{{ $gimme->article->vimeoid }}?title=0&byline=0&portrait=0" width="300" height="180" frameborder="0"></iframe>
<em><a href="http://vimeo.com/{{ $gimme->article->vimeoid }}" target="_blank">Watch video in separate window</a></em>
{{ /if }}
Make sure that the URL in the iframe is on one line.
YouTube video embed from URL
For this example, journalists will copy and paste the share URL from YouTube into an article field of their story. This way you can display Youtube videos on your site, but without your journalists embedding code in the WYSIWYG editor field. (This is for various different reasons; one of them might be the custom size of your space dedicated to the YouTube embed). You can use the link which YouTube offers by default (click on "share" under the video):
http://youtu.be/NokMkmthduY
What you need to do then is to extract just the important part NokMkmthduY from the field and put it in a wrapper with predefined dimensions, transparency options etc. This is how you can do it:
<script type="text/javascript">
var embedParts="{{ $gimme->article->youtubeurl }}".split("/");
document.write("<iframe title=\"YouTube video player\" width=\"435\" height=\"356\" src=\"http://www.youtube.com/embed/"+embedParts[3]+"\" frameborder=\"0\" allowfullscreen></iframe>");
</script>
Responsive videos
How to make our videos responsive and mobile ready? It is really easy. There are bunch of different approaches, libraries, plugins or small scripts. One of them is http://fitvidsjs.com/. Check it!