<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="demo-music.html">
</head>
<body>
<demo-music></demo-music>
</body>
</html>
<link rel="import"
href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="demo-music">
<style>
.topic {
display: block;
color: #0000ff;
font-weight: bold;
}
</style>
<template>
<span class="topic">การตั้งค่า</span>
<a href="http://www.w3schools.com/html/html_youtube.asp" target="_blank">HTML YouTube Videos</a>
<div>
<span>ความกว้าง (width)</span>
<input type="number" value="{{width::input}}">
</div>
<div>
<span>ความสูง (height) </span>
<input type="number" value="{{height::input}}">
</div>
<span class="topic">ตัวอย่าง</span>
<div id="preview">
<object id="player" type="application/x-shockwave-flash" style="width: 450px; height:366px;" data="http://www.youtube.com/v/sEQf5lcnj_o?autohide=0C&version=3">
<param name="movie" value="http://www.youtube.com/v/WQnAxOQxQIU?autohide=0&version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
<div style="font-size: 0.8em"><a href="http://www.tools4noobs.com/online_tools/youtube_xhtml/">Get your own valid XHTML YouTube embed code</a></div>
</div>
<span class="topic">โค้ด</span>
<div id="code">
</div>
</template>
<script>
Polymer({
is: "demo-music",
ready: function () {
this.$.player.style.width = this.width + "px";
this.$.player.style.height = this.height + "px";
},
properties: {
width: {
type: Number,
value: 300,
notify: true,
observer: '_widthChanged'
},
height: {
type: Number,
value: 30,
notify: true,
observer: '_heightChanged'
}
},
_heightChanged: function (newValue, oldValue) {
if(newValue < 10) {
newValue = 10;
}
this.$.player.style.height = newValue + "px";
this._updateCode();
},
_widthChanged: function (newValue, oldValue) {
if(newValue < 10) {
newValue = 10;
}
this.$.player.style.width = newValue + "px";
this._updateCode();
},
_updateCode: function() {
this.$.code.textContent = this.$.preview.innerHTML;
}
});
</script>
</dom-module>