<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/rss-style.xsl" type="text/xsl"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	     xmlns:dc="http://purl.org/dc/elements/1.1/"
	   xmlns:atom="http://www.w3.org/2005/Atom"
	     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	  xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>Embedding Mobile YouTube in Dabr / Twitter &#8211; Terence Eden’s Blog</title>
	<atom:link href="https://shkspr.mobi/blog/2009/09/embedding-mobile-youtube-in-dabr-twitter/feed/" rel="self" type="application/rss+xml" />
	<link>https://shkspr.mobi/blog</link>
	<description>Regular nonsense about tech and its effects 🙃</description>
	<lastBuildDate>Fri, 27 Sep 2024 05:39:26 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://shkspr.mobi/blog/wp-content/uploads/2023/07/cropped-avatar-32x32.jpeg</url>
	<title>Embedding Mobile YouTube in Dabr / Twitter &#8211; Terence Eden’s Blog</title>
	<link>https://shkspr.mobi/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title><![CDATA[Embedding Mobile YouTube in Dabr / Twitter]]></title>
		<link>https://shkspr.mobi/blog/2009/09/embedding-mobile-youtube-in-dabr-twitter/</link>
					<comments>https://shkspr.mobi/blog/2009/09/embedding-mobile-youtube-in-dabr-twitter/#comments</comments>
				<dc:creator><![CDATA[@edent]]></dc:creator>
		<pubDate>Sun, 27 Sep 2009 10:15:14 +0000</pubDate>
				<category><![CDATA[mobile]]></category>
		<category><![CDATA[dabr]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[YouTube]]></category>
		<guid isPermaLink="false">http://shkspr.mobi/blog/?p=554</guid>

					<description><![CDATA[I&#039;ve decided to add a preview of YouTube videos into Dabr, the mobile Twitter service.  The code is fairly simple - although I still suck at regular expressions.  if (preg_match_all(&#039;#youtube.com/watch?v=([_-dw]+)#&#039;, $tmp, $matches, PREG_PATTERN_ORDER) &#62; 0)  {   foreach ($matches[1] as $match)   {   $images[] = theme(&#039;external_link&#039;, &#34;http://m.youtube.com/watch?v={$match}&#34;, &#34;&#60;img…]]></description>
										<content:encoded><![CDATA[<p>I've decided to add a preview of <a href="http://www.youtube.com/">YouTube</a> videos into <a href="http://m.dabr.co.uk/">Dabr</a>, the mobile <a href="http://twitter.com">Twitter</a> service.</p>

<p>The <a href="http://code.google.com/p/dabr/source/detail?r=192">code is fairly simple</a> - although I still suck at regular expressions.</p>

<pre><code class="language-php">if (preg_match_all('#youtube.com/watch?v=([_-dw]+)#', $tmp, $matches, PREG_PATTERN_ORDER) &gt; 0)
 {
  foreach ($matches[1] as $match)
  {
  $images[] = theme('external_link', "http://m.youtube.com/watch?v={$match}", "&lt;img src='http://i.ytimg.com/vi/{$match}/1.jpg' class='twitpic' /&gt;");
  }
 }
</code></pre>

<p>Here's how it looks.&nbsp; A user writes a tweet which contains a YouTube URL</p>

<p></p><div id="attachment_555" style="width: 490px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-555" class="size-full wp-image-555" title="Capture7_55_25" src="https://shkspr.mobi/blog/wp-content/uploads/2009/09/Capture7_55_25.jpg" alt="A thumbnail embedded in a tweet" width="480" height="320"><p id="caption-attachment-555" class="wp-caption-text">A thumbnail embedded in a tweet</p></div><p></p>

<p>The thumbnail is displayed and hyperlinked to the <a href="http://m.youtube.com/">mobile version of YouTube</a></p>

<p></p><div id="attachment_556" style="width: 490px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-556" class="size-full wp-image-556" title="Capture7_55_41" src="https://shkspr.mobi/blog/wp-content/uploads/2009/09/Capture7_55_41.jpg" alt="Pointing to Mobile YouTube" width="480" height="320"><p id="caption-attachment-556" class="wp-caption-text">Pointing to Mobile YouTube</p></div><p></p>

<p>When clicked on, the user is taken straight to the video's page.</p>

<p></p><div id="attachment_557" style="width: 490px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-557" class="size-full wp-image-557" title="Capture8_35_37" src="https://shkspr.mobi/blog/wp-content/uploads/2009/09/Capture8_35_37.jpg" alt="The Destination" width="480" height="320"><p id="caption-attachment-557" class="wp-caption-text">The Destination</p></div><p></p>

<p>There were three main issues with this code</p>

<ol>
    <li>How do we extract the video's ID from the URL? YouTube video IDs contain alphanumeric character and the - and _ characters. They can also have other parameters passed.&nbsp; There can also be text <em>after</em> the URL.&nbsp; The regular expression above takes care of them.</li>
    <li>How do we get the thumbnail?&nbsp; Previously, I had been using the image URL given in the m.YouTube page - something like http://i.ytimg.com/vi/plvE4882B7Y/default.jpg?w=80&amp;h=60 - however those URLs now need signing. So, using the <a href="http://code.google.com/apis/youtube/2.0/reference.html">YouTube API</a>, I took a look at the Video Information XML file - http://gdata.youtube.com/feeds/api/videos/plvE4882B7Y - it showed that all videos have a full sized thumbnail - http://i.ytimg.com/vi/plvE4882B7Y/0.jpg and a mobile friendly thumbnail - http://i.ytimg.com/vi/plvE4882B7Y/1.jpg</li>
    <li>How do we link to the mobile version of YouTube?&nbsp; There are two ways to do this - either allow YouTube to detect the User-Agent and redirect based on that, or simply point to the mobile version.&nbsp; While a regular YouTube link looks like http://<strong>www</strong>.youtube.com/watch?v=plvE4882B7Y the mobile one simply substitutes www for m : http://<strong>m</strong>.youtube.com/watch?v=plvE4882B7Y</li>
</ol>

<p>TODO</p>

<p>For phones which support playing YouTube videos inline (Android, some Nokias etc) I may actually embed the video, rather than just link to it.&nbsp; I may also detect Desktop Browsers and send them to the regular version of YouTube.</p>
<img src="https://shkspr.mobi/blog/wp-content/themes/edent-wordpress-theme/info/okgo.php?ID=554&HTTP_REFERER=RSS" alt="" width="1" height="1" loading="eager">]]></content:encoded>
					
					<wfw:commentRss>https://shkspr.mobi/blog/2009/09/embedding-mobile-youtube-in-dabr-twitter/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
	</channel>
</rss>
