梅花問路

我想要分享Youtube影片到部落格文章裡面、也想分享在我的公告版位、或者側欄

該怎麼做呢~首先先到你要分享的影片YouTube頁面按下影片下方的"分享"按鈕

接著會跳出一個框框，進到"嵌入"這個選項裡面

在這裡你會看到撥放器語法本人，如果你是要分享到你的文章裡面，直接複製這串語法

到發表文章的頁面裡面按一下就可以貼上撥放器語法囉!

如果你是要分享到公告版面或者是側欄裡面

請你要先到你自己的CSS語法裡面按"Ctrl+F"搜尋 #links 看一下自己的側欄設定width(寬度)是多少

在原始的YouTube撥放器語法貼上之後會是原版設定的大小，如上一張圖片當中梅花標示了底線的那行字

"width="560" height="315""

假設我的側欄#links寬度是240px，原始撥放器寬560、高315，你要把它變成一個寬度240的撥放器

這時候你該做什麼事情呢?? -----------------------算數學!!!!!!!!!

我來寫一下算式....   560 : 315 = 240 : X  ，X=135

也就是說你要放一個在你的側欄可以剛剛好顯示的YouTube撥放器語法

你需要把你的語法裡面的width="560" height="315"改成width="240" height="135"

因為有朋友和梅花說，他們真的看不懂! 我列成表格，應該會比較清晰易懂一些

X=315(原始播放器高度)*240(你的側欄#links寬度)/560(原始播放器寬度)=135

(如果不能整除，小數點我通常無條件進位)

改完之後的語法，你再到側欄的框框裡面貼上，再按送出即可

(兩欄式的頁面要放在側欄一才會在前台顯示，三欄式的可以放在側欄一或是側欄二)

因為大家的側欄設定應該都不太一樣，建議還是要稍微看一下CSS #links裡面的寬度再來換算會比較好唷!

如果您看不懂我這一串在說什麼，可以留言給我描述一下您碰到的問題呦!

《YOUTUBE的LAZYLOAD》

紅字是我們要更改的地方，這個LAZYLOAD用處是可以讓網頁載入的流量可以稍稍降低一些(就是可以讓你的網頁在載入的時候比較不那麼吃力)

語法(以下的示範範例是寶寶求證歌):

<iframe width="560" height="315" src="https://www.youtube.com/embed/103B3veut5I" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/103B3veut5I?autoplay=1><img src=https://img.youtube.com/vi/103B3veut5I/hqdefault.jpg alt='影片的標題'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

因為發表文章這區好像有部分HTML語法不可用，這串語法可以用在側欄或是公告版位，生效的效果可以參考梅花的側欄和公告版位的youtube外掛顯示

從這個LAZYLOAD語法裡面我們可以看到，這邊用語法去抓出來這個youtube影片的圖片

參考的文章是這一篇: YouTube 影片封面 如何下載？靠這招找出原始圖片網址，輕鬆下載高解析影片封面圖片（教學）

梅花的語法筆記

​檢視CSS標籤F12	​文章區塊 #content
＊開發人員工具＊	＊改文章標題字體、背景＊
​部落格整體 #body	＊改行距、邊界＊ ⛔
＊換背景底圖＊	公告版面 #spotlight
＊換字體＊	＊公告版面應用＊
＊換部落格ICON＊	實用推薦
＊設計LOGO＊	＊讓部落格可以被Google＊
​封面橫幅#banner/#header	＊Google Analytics分析＊
＊換封面底圖＊	其他應用
＊部落格標題敘述大小位置＊	＊梅花的語法筆記本＊
側欄區塊 #links	＊文章內的目錄(錨點)＊
＊改側欄標題的背景＊	＊關閉遮蓋版面的廣告＊
＊Facebook粉專外掛＊	＊隱藏上方藍色選單＊
＊音樂外掛＊	＊連結Google相簿＊
＊YouTube外掛＊	＊圖片瘦身不失真＊
＊分享連結階層＊