3D FlipBook - More than one video in pdf not working, position also inherited from first/second.

d***e@danep.plus.com
2020-10-12
2020-10-13

When adding a second video to a pdf page using the usual css and html code, the second video does not work and then returning to the first video, it has inherited the psoitionin of the second and now also does not work (play). This can happen vice versa as well. Is there different code to include to make sure the videos are contained seperatley throughout the pdf pages?

Replies

d***e@danep.plus.com
2020-10-12
2020-10-12

I've tried putting the html in a div container which results in a bit better performance and now both seem to play, but a problem remains that when you go back from one page to another that has video, the video on the page you go back to inherits the position of the video of the page you just left. Which is obviously not good. How do I stop this occuring.

d***e@danep.plus.com
2020-10-12
2020-10-12

Scrub that. the Div containers dont seem to be any better with further testing.

a***r@3dflipbook.net
2020-10-13
2020-10-13

use different CSS classes for different positions: video1, video2, video3, do not apply positioning for video - i guess you receive CSS classes redefinition.

d***e@danep.plus.com
2020-10-13
2020-10-13

I'm not a coder so dont know CSS well enough hence the problems. I've tried some classes but again, not sure I'm doing it right as wtill not working properly. Can you give an example please of the CSS code and HTML needed for multiple videos.

d***e@danep.plus.com
2020-10-14
2020-10-14

Can you please provide the correct code for multiple videos. CSS and HTML

a***r@3dflipbook.net
2020-10-16
2020-10-16
page 2:
CSS:
      .vid1 {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 100px;
        left: 100px;
      }
      .vid2 {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 500px;
        left: 100px;
      }
HTML:
    <div class="vid1 youtube play-on-shown pause-on-hide" data-id="fQOuO6w9CR0"></div>
    <div class="vid2 youtube play-on-shown pause-on-hide" data-id="COueCeQpeB4"></div>
page 4:
CSS:
      .vid3 {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 300px;
        left: 100px;
      }
      .vid4 {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 700px;
        left: 100px;
      }
HTML:
    <div class="vid3 youtube play-on-shown pause-on-hide" data-id="fQOuO6w9CR0"></div>
    <div class="vid4 youtube play-on-shown pause-on-hide" data-id="COueCeQpeB4"></div>
d***e@danep.plus.com
2020-10-16
2020-10-16

Aha many thanks. Thats much different to what I had been trying.

d***e@danep.plus.com
2020-10-16
2020-10-16

Oajy, now thats all working nicely. Another small problem. Adding parameters that enable or disable options, such rel=0, modestbranding=1 etc. Only one of these will work in the current html (only the first one after ?) and will break the show-on-pause and the pause-on-hide parameters. ie, div class="vid3 youtube play-on-shown pause-on-hide" data-id="fQOuO6w9CR0"?rel=0&modestbranding=1>In this, only the rel=0 will work. But ti will break the play or pause. This is probably because it's no longer an iframe??. Any workarounds? I tried the older &amp

a***r@3dflipbook.net
2020-10-19
2020-10-19

Current version does not support parameters.

Log In to leave a comment