按一下，
一個可讓閱聽眾自由移動的漂亮影音小視窗就會自動呈現出來。
影音教學 |
 |
按這裡就會展出影音小視窗
１．請在<head>xxx</head>間或<body>之後貼上下列程式碼：
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jqueryui/jquery.youtubepopup.min.js"></script>
說明：<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jqueryui/jquery.youtubepopup.min.js"></script>
- 紅色的 jquery-1.9.1.js 這條程式碼，如其他套裝程式已使用，則不用再寫入。
２．請在<body>之後貼上下列驅動互動作用的 jquery 程式碼：
<script>
$(function () {
$("a.youtubepopup").YouTubePopup({width:640, height: 360, overlayOpacity: 0, draggable: true});
});
</script>
說明：$(function () {
$("a.youtubepopup").YouTubePopup({width:640, height: 360, overlayOpacity: 0, draggable: true});
});
</script>
- width: 640 是指 youtube 要播放的影音的寬度，height: 360 是高度。
- draggable: true 是指設定為可自由移動。
３．為所要按下文字寫入html控制碼：
<a class="youtubepopup"
href="http://www.youtube.com/embed/c80sS-EfSTI?rel=0">按這裡就會展出影音小視窗
</a><br>
說明：- href="http://xxx" http://xxx 是指影音的位置網址，取得方法請看影音教學。
原始語法出處 jQuery YouTube Popup Player Plugin
沒有留言:
張貼留言