diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js
index af3beb8..e81614f 100644
--- a/app/static/js/ascroll.js
+++ b/app/static/js/ascroll.js
@@ -201,6 +201,79 @@ function showOverlay(event) {
 
 }
 
+function renderAnnotation(config, video, ascroll, annotation) {
+    var div = document.createElement('div')
+    div.classList.add('annotation')
+
+    var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
+    var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
+    if (!config.first) {
+        config.first = annotation
+        config.info.style.background = color1
+    }
+    div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
+    var figcaption = ''
+    if (annotation.title) {
+        figcaption = `<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>`
+    }
+    div.innerHTML = `
+        <div class="frame">
+            <figure>
+                <img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
+                ${figcaption}
+            </figure>
+        </div>
+        <div class="text">${annotation.value}</div>
+    `
+    ascroll.appendChild(div)
+    var frame = div.querySelector('.frame')
+    document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
+        var src
+        if (config.edit) {
+            src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
+        }
+        if (config.loaded && visible) {
+            updatePlayer(video, frame, annotation['in'], annotation['out'], src)
+        }
+
+    }))
+}
+
+function renderAnnotations(config) {
+    var ascroll = document.querySelector('#ascroll')
+    config.loaded = false
+    var video = document.createElement('video')
+    video.classList.add('player')
+    video.playsinline = true
+    video.muted = true
+    if (config.item) {
+        setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
+    }
+    video.addEventListener('timeupdate', timeupdate)
+    video.addEventListener('touchstart', showOverlay)
+    video.addEventListener('mouseover', showOverlay)
+    var box = document.createElement('div')
+    box.classList.add('vbox')
+    box.appendChild(video)
+    ascroll.appendChild(box)
+
+    config.info = formatInfo(config, ascroll)
+    config.annotations.forEach(annotation => {
+        renderAnnotation(config, video, ascroll, annotation)
+    })
+    config.loaded = true
+    if (config.first) {
+        let frame = ascroll.querySelector('.annotation .frame')
+        if (frame) {
+            var src
+            if (config.edit) {
+                src = `${baseURL}/${config.first.id.split('/')[0]}/480p.webm`
+            }
+            updatePlayer(video, frame, config.first['in'], config.first['out'], src)
+        }
+    }
+}
+
 async function loadClips(annotations) {
     var items = annotations.map(annotation => annotation.id.split('/')[0])
     items = [...new Set(items)]
@@ -229,140 +302,41 @@ async function loadClips(annotations) {
     })
 }
 
-function loadItem(config) {
-    pandoraAPI('get', {id: config.item, keys: [
-        'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
-    ]}).then(response => {
-        //var color = `hsl(${response.data.hue}, ${response.data.saturation * 100}%, ${response.data.lightness * 100}%)`
-        var color = `hsl(${response.data.hue}, 70%, 50%)`
-        //document.body.style.background = color
-        var ascroll = document.querySelector('#ascroll')
-        var loaded = false
-
-        var video = document.createElement('video')
-        video.classList.add('player')
-        video.muted = true
-        setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
-        video.addEventListener('timeupdate', timeupdate)
-        video.addEventListener('touchstart', showOverlay)
-        video.addEventListener('mouseover', showOverlay)
-        var box = document.createElement('div')
-        box.classList.add('vbox')
-        box.appendChild(video)
-        ascroll.appendChild(box)
-
-        var first
-        var info = formatInfo(config, ascroll)
-        var annotations = response.data.layers[config.layer].filter(annotation => {
-            return !(config.user && annotation.user != config.user)
+function loadAnnotations(config) {
+    if (config.item) {
+        pandoraAPI('get', {id: config.item, keys: ['layers']}).then(response => {
+            var annotations = response.data.layers[config.layer].filter(annotation => {
+                return !(config.user && annotation.user != config.user)
+            })
+            loadClips(annotations).then(annotations => {
+                config.annotations = annotations
+                renderAnnotations(config)
+            })
         })
-        loadClips(annotations).then(annotations => {
-            annotations.forEach(annotation => {
-                var div = document.createElement('div')
-                div.classList.add('annotation')
-
-                var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
-                var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
-                if (!first) {
-                    first = annotation
-                    info.style.background = color1
-                }
-                div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
-                div.innerHTML = `
-                    <div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
-                    <div class="text">${annotation.value}</div>
-
-                `
-                ascroll.appendChild(div)
-                var frame = div.querySelector('.frame')
-                document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
-                    if (loaded && visible) {
-                        updatePlayer(video, frame, annotation['in'], annotation['out'])
+    } else {
+        pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
+            var annotations = []
+            response.data.clips.forEach(clip => {
+                clip.layers[config.layer].forEach(annotation => {
+                    if (config.user && annotation.user != config.user) {
+                        return
                     }
-
-                }))
+                    annotation.title = clip.title
+                    annotations.push(annotation)
+                })
             })
-            loaded = true
-            let frame = ascroll.querySelector('.annotation .frame')
-            if (frame) {
-                updatePlayer(video, frame, first['in'], first['out'])
-            }
-        })
-    })
-}
-function loadEdit(config) {
-    pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
-        var ascroll = document.querySelector('#ascroll')
-        var loaded = false
-
-        var video = document.createElement('video')
-        video.classList.add('player')
-        video.muted = true
-        video.addEventListener('timeupdate', timeupdate)
-        ascroll.appendChild(video)
-
-        var first
-        var info = formatInfo(config, ascroll)
-        var previous
-
-        var annotations = []
-
-        response.data.clips.forEach(clip => {
-            clip.layers[config.layer].forEach(annotation => {
-                if (config.user && annotation.user != config.user) {
-                    return
-                }
-                annotation.title = clip.title
-                annotations.push(annotation)
+            loadClips(annotations).then(annotations => {
+                config.annotations = annotations
+                renderAnnotations(config)
             })
         })
-        loadClips(annotations).then(annotations => {
-            annotations.forEach(annotation => {
-                var div = document.createElement('div')
-                div.classList.add('annotation')
-
-                var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
-                var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
-                if (!first) {
-                    first = annotation
-                    info.style.background = color1
-                }
-                div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
-                div.innerHTML = `
-                    <div class="frame">
-                        <figure>
-                            <img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
-                            <figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>
-                        </figure>
-
-                    </div>
-                    <div class="text">${annotation.value}</div>
-
-                `
-                ascroll.appendChild(div)
-                var frame = div.querySelector('.frame')
-                document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
-                    var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
-                    if (loaded && visible) {
-                        updatePlayer(video, frame, annotation['in'], annotation['out'], src)
-                    }
-
-                }))
-            })
-        })
-        loaded = true
-        let frame = ascroll.querySelector('.annotation .frame')
-        if (frame) {
-            var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
-            updatePlayer(video, frame, first['in'], first['out'], src)
-        }
-    })
+    }
 }
 
 config.layer = config.layer || layer
 
-if (config.item) {
-    loadItem(config)
-} else if (config.edit) {
-    loadEdit(config)
+if (config.annotations) {
+    renderAnnotations(config)
+} else {
+    loadAnnotatoins(config)
 }
diff --git a/app/templates/film.html b/app/templates/film.html
index 41f3f85..e83955d 100755
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -33,7 +33,7 @@ body {
 				
 		</div>	
 		<div class="video-block">			
-			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
+			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted playsinline></video>
 		</div>
 		<div class="summary-block">
 			<p>{{ film.data.summary|safe }}</p>
@@ -49,7 +49,7 @@ body {
 					{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
 				</div>
 			</div>
-		</div>					
+		</div>
 		<div class="play">
 			<div class="texts">
 				{% for text in film.related_texts %}