越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 下滑式 YouTube 播放器


- Tutorial requested by Vanessa -

就是这一类的 YouTube 播放器噜 ^-^

1. 设计 → Edit HTML

2. 按 Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码:
#youtube {
border-radius: 8px;
margin-bottom: 8px;
width: 210px;
text-align: center;
font-size: 10px;
background: #fff;
border: 1px solid #eee;
}

#player {
position:fixed;
left: 20px;
top:-70px;
text-align: center;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#player:hover {
top:8px;
}
4. 按保存后,到 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

5. 添加以下代码:
<div id="player">
<div id="youtube">
<div style="border:1px solid #eee; width:210px;height:65px;overflow:auto; ">
<center><br /> // Can't Hurt - Yisa <br />
<object width="160" height="25"><param name="movie" value="YouTube代码?fs=1&amp;autoplay=0&amp;hl=en_US&amp;rel=0&amp;color1=ffffff&amp;amp;color2=ffffff " /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="YouTube代码?fs=0&amp;autoplay=1&amp;hl=en_US&amp;rel=0&amp;color1=ffffff&amp;amp;color2=ffffff " type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="160" height="25"></embed></object>
</center></div></div>
<img src="图片 url"/></div>
6. 保存即可。

小解释
紫色代码:可选择删除或留下,写你想要写的话 / 歌名也可以
红色代码:YouTube 的代码(如何获得 YouTube 代码:点我
蓝色代码:Click Here 的图片(可更改)

* 附注图片两张
http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/clickhere-1.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/clickhere1.gif

14 comments:

  1. 请问、如果要重复播放,可以加什么代码吗?
    还是不能弄重复播放?._.

    ReplyDelete
    Replies
    1. 可以的 :)
      你按 Ctrl+F 寻找 autoplay=0
      将 0 改成 1,就可以了 :)
      那里有两个 autoplay=0 哦..
      记得都改 ^^

      Delete
    2. 改了,可是不行吔 ><

      Delete
    3. 抱歉,我将 “重复播放” 看成自动播放 ><

      你在 youtube 的代码里面寻找这个 “fs=1”
      然后在 “fs=1” 后面添加代码:&loop=1

      就可以了 :)

      Delete
  2. 做么我copy不到的 /.\

    ReplyDelete
    Replies
    1. 使用 Ctrl+C 来拷贝代码的 ;)

      Delete
  3. Replies
    1. YouTube 播放器最近失效了 ;)

      Delete
  4. Replies
    1. 这是在 Youtube 的代码啊 :)
      教程:http://angelbii.blogspot.com/2011/11/youtube.html

      -replied by BII.

      Delete
  5. 抱走咯 .
    :) 其实我是想问你们怎样找到这些教程啊 ? 很多 code .

    ReplyDelete
  6. 能不能把youtube播放器放去旁边?

    ReplyDelete
    Replies
    1. 什么意思,放去旁边?

      -replied by Bii.

      Delete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。