Tonda Houdek

Q: eBook: add video into aside footnote

Hi,

 

I’m creating eBook using EPUB but I’ve got a problem with adding video into aside footnote. Video in footnote works correctly but when I enlarge it into fullscreen, footnote box stays on top so it covers fullscreen video.

 

 

Here you can see it screenshoted

 

- I clicked my "button" (its link and in it is written letter using unique font which looks like play button)

First_Step.PNG

- my footnote appeared inside footnote is video

Second_Step.PNG

- I played my video

Third_Step.PNG

- and I change video view to fullscreen

Fourth_Step.PNG

- then aside appear in front of screen and cover part of video

 

XHTML

 

<div>

          <a epub:type="noteref" class="videos pageLast" href="#vTest">&#160;</a>

</div>

<aside epub:type="footnote" id="vTest">

                 <video src="videos/sample_iPod.m4v" type="video/m4v" width="310" height="240" controls="true" />

</aside>

 

CSS

 

#vTest {

          display:none;

}

 

.pageLast {

          position: absolute; top: 100px; left: 100px;

}

 

Thank you for answers

Posted on Mar 12, 2014 9:08 AM