可定義大小的 YouTube 縮圖

我的自家 首頁/標籤 "排版"是用 list 方式, 當中只是列出一張圖片,
但是當內文沒有上載的圖片時, 它是沒有的,
或是, 只有 YouTube 的嵌入影片時, 它會自動得出一張 youtube 小圖,
連結方式是 http://img.youtube.com/vi/[youtube-ID]/default.jpg
可惜這圖片大小是 120×90, 它太小了.

原來這個大小是有修改空間, 只要把 default.jpg 改成一些已經知曉的名稱,
可以得出不同的圖片大小. 以下是它們的定義...

0.jpg (480×360)
1.jpg (120×90)
2.jpg (120×90)
3.jpg (120×90)
default.jpg (120×90)
hqdefault.jpg (High Quality 480×360)
mqdefault.jpg (Medium Quality 320×180)
sddefault.jpg (Standard 640×480)
maxresdefault.jpg (Maximum Resolution 1920×1080)

好了, 為了配合我現時所用的"排版"方式, 馬上簡單的修改當中的 code.
當中只是在 javascript 加入了一句. (原 code 加在第16行)

pic = pic.replace("default.jpg","mqdefault.jpg");// 設定youtube圖片大小

把 default.jpg 改成 mqdefault.jpg, 即是 320x180 大小,
跟我設定把圖示大小為 S350 配合. (可以由這些數據自由設定大小)

詳情可回看 "Blogspot 列表模式-文章標題;自定大小的首幅圖片;部分內文;閱讀更多"
http://freetongdiy.blogspot.hk/2014/09/blogspot.html

現時本網誌所使用的結構, 左右排版; 大圖示(修改後的code).

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s350");// 設定圖片大小, e.g. S350
     pic = pic.replace("default.jpg","mqdefault.jpg");// 設定youtube圖片大小,
     document.write("<img src='"+ pic +"'/>"); 
    })()
</script>
</a>
<div><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3><div>
<div style='margin-top:10px;'><data:post.snippet/></div><br/>
<div style='clear:both'/></div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<a href='http://freetongdiy.blogspot.hk/2015/07/youtube.html' target='_blank' title='Blogspot 列表模式 程式設計：FreeTong'><img src='https://www.google.com/images/icons/product/blogger-16.png'/></a>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if></b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

貼上一段香港影片, 作為這篇 YouTube 縮圖的參照