-
Notifications
You must be signed in to change notification settings - Fork 0
/
mixcloud-widget.html
91 lines (80 loc) · 3.68 KB
/
mixcloud-widget.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="graduate software developer blog">
<meta name="author" content="louise-r-blue">
<meta name="keywords" content="graduate software developer, interviews, mindfulness, cv, resume, FAQ, cloudwalker">
<title>Is this it?</title>
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600italic,300,500,600,700,800%7CPoppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<!-- CSS & scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!-- <link href = "louise-r-blue.github.io/styles/main.css" rel="stylesheet" type="text/css"> -->
<link rel="shortcut icon" href="/favcon.ico" type="image/x-icon">
<link rel="icon" href="/favcon.ico" type="image/x-icon">
<!-- <script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script> -->
<!-- [if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
<style>
* {
box-sizing: border-box;
}
.col-2{
width:16.66%;
}
.col-8{
width:66.66%;
border:1px solid gray;
border-radius: 10px;;
margin-top: 40px;
}
[class*="col-"]{
float: left;
padding:15px;
}
</style>
</head>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<body>
<div class ="row">
<div class="col-2"></div>
<div class="col-8">
<iframe class="widget-top"id="widget-iframe1"width="100%" height="400" src="https://www.mixcloud.com/widget/iframe/?feed=%2Fhongkongpingpong%2Fbeating-the-crates-20131228%2F" frameborder="0" ></iframe>
<br>
<!-- <iframe id="widget-iframe2"width="100%" height="400" src="https://www.mixcloud.com/widget/iframe/?feed=%2Fhongkongpingpong%2Fbeating-the-crates-20171127%2F" frameborder="0" ></iframe> -->
</div>
<div class="col-2"></div>
</div>
<!-- <script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script> -->
<script type="text/javascript">
var widget1 = Mixcloud.PlayerWidget(document.getElementById("widget-iframe1"));
// var widget2 = Mixcloud.PlayerWidget(document.getElementById("widget-iframe2"));
function togglePlayPause () {
// handle the ui
}
widget1.ready.then(function() {
// Put code that interacts with the widget here
console.log("1. Promises needed on client");
widget1.events.pause.on(togglePlayPause);
widget1.events.play.on(togglePlayPause);
});
// widget2.ready.then(function() {
// // Put code that interacts with the widget here
// console.log("2. Promises needed on client");
// widget2.events.pause.on(togglePlayPause);
// widget2.events.play.on(togglePlayPause);
// });
</script>
<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>
</body>
</html>