YouTube 視頻播放小工具 🤍 灰鴿 ⭐ Google Blogger 建置研習工作室

此開發是將 TextList 文字清單小工具轉換為 YouTube 多視頻播放器。

您可以直接在文字列表小工具的設置中添加 YouTube 視頻的標識符(YouTube 視頻 ID)

可輕易的管理視頻的順序和數量

你不用在乎尺寸。閱讀器會自動適應其容器的大小。

自定義播放器設置。定義顯示條件（頁面類型）

點按下面的 Code 複製 HTML碼：

<b:widget id='TextList117' locked='false' mobile='yes' title='Playlist videos' type='TextList' version='2' visible='true'>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>

<h2><data:title/></h2>
<div class='widget-content'>
<div expr:id='"BCplayer" + data:widget.instanceId' />
</div>
<script>
var videolocale ="";
var videocontainer = "BCplayer<data:widget.instanceId/>";
var videolist = "<b:loop index='i' values='data:items limit 200' var='videoId'><b:if cond='data:i == 1'><data:videoId/></b:if><b:if cond='data:i not in [0,1]'>,<data:videoId/></b:if></b:loop>";
var firstvideo = "<b:eval expr='data:items[0]'/>";
// <![CDATA[
var autoplay = 0; // 0 (default) or 1
var rel = 1; // 0 or 1 (default)
var showinfo = 1; // 0 or 1 (default)
var loop = 0; // 0 (default) or 1
var control = 1; // 0 or 1 (default)
var iv_load_policy = 3; // 1 (default) or 3
var color = "red"; // "red" (default) or "white"
var widgetBC = document.getElementById(videocontainer);
var containerWidth;
if (widgetBC.offsetWidth) { containerWidth = widgetBC.offsetWidth; }
var containerHeight = (containerWidth/16)*9;
var src = "https://www.youtube.com/embed/"+firstvideo+"?playlist="+firstvideo+","+videolist+"&rel="+rel+"&iv_load_policy="+iv_load_policy+"&autoplay="+autoplay+"&showinfo="+showinfo+"&loop="+loop+"&color="+color+"&controls="+control+"&wmode=opaque"+videolocale;
var player = document.createElement('iframe');
player.setAttribute('src', src);
player.setAttribute('allowtransparency', 'true');
player.setAttribute('scrolling', 'no');
player.setAttribute('frameborder', '0');
player.setAttribute('width', "100%");
player.setAttribute('height', containerHeight);
document.getElementById(videocontainer).appendChild(player);
// ]]>
</script>
</b:includable>
</b:widget>

按主題 >> 在模板的 HTML 編輯器中添加代碼：

你可以貼在 Blog 小工具上方
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog' visible='true'>

儲存模板後，小工具將位於 Blog 項目小工具的正上方。

或貼在任一個區段之後

<b:section class='top_menu' id='menu' name=' 版頭'/>

然後轉到 [版面配置]窗格，將其移動到你想放置的地方。

編輯播放清單

如下 ~ 打開文字清單小工具，在設置中輸入 YouTube 視頻 ID（最好是至少 2 個視頻）時，該小工具就會出現在博客上。

或許、你不想讓播放器在任何的頁面顯現，只想在某特定類型的頁面顯示，接下來我們就在小工具上，加上限制

要如何在小工具上，加上條件運算屬性? ( cond )

下面只提供你幾種判斷頁面類型的範例參考 :

mobile='yes' 可在手機顯視 ※ 除了 Yes、No 以外還有一個 only 可選 : 該小工具只會在移動版本中顯示
cond='data:view.isHomepage' 只在首頁出現

<b:widget cond='data:view.isHomepage' id='TextList117' locked='false' mobile='yes' title='Playlist videos' type='TextList' version='2' visible='true'>

cond='not data:view.isHomepage' 除了首頁以外，其他頁面都會出現

cond='data:view.isPost' 文章（帖子）頁面

cond='data:view.isPage' 網頁頁面

cond='data:blog.url == "URL" ' 在某張文章、某張網頁

也可以複選，包含在內
cond='data:blog.pageType in {"item", "index", "archive"}'

注 1：小工具不會檢查列表的內容。如果列表包含不是標識符的項目（例如文本），播放器將無法正常工作。

注 2：YouTube 播放器最多可容納200 個視頻。

要如何把你最得意的文章置頂 ?

其實在 blogger 的小工具裡，有一個可讓你置頂文章的小工具，叫作 [精選文章]小工具，他可以讓你任選一篇文章，其設置的方法，和上面一樣

同樣把精選文章小工具，移動到網誌文章上面，設為只在首頁顯示 ~

<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' version='2' visible='true'>

下面的數據與頁面的類型和不同的視圖直接相關。在 XML 編輯器中使用它們來禁止或允許通過條件或其他方法執行元素。

Playlist videos