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

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.

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

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

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.

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

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>

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

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>

Current version does not support parameters.

Hello, I only just purchase the pro plugin i used the above code I can hear the video but I am not able to see the video am I missing something, or is that the way it meant to be?

Thats a problem with a Chrome bug. Use any other browser.

This is the best feature of your product. I am able to insert a video and change the size of the video but I can't move the position. Can you help me to figure this out? This breakthrough would really add engagement to my content. Thank you

https://nicolesoltau.com/3d-flip-book/test-add-video/

CSS: width: 860px; height: 615px; position: absolute; top: 2400px; left: 300px; } HTML:

<div class="container">
<iframe width="800" height="615" src="https://intelli.tv/embed/CtOBcbw_lw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen></iframe>
</div>

Nicole, you need for the first page insert CSS:

.vid {
position: absolute;
border: 0;
}

this is common properties for all videos.

then you can embed video using HTML on any page like:

<iframe class="vid" width="400" height="307" style="left:300px;top:200px;" src="https://intelli.tv/embed/CtOBcbw_lw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen></iframe>

I used your code and it worked! Thank you. BTW, where do I find the iframe code of the finished book that I created, to embed on another site?

Nicole, you need to have special template on your site for this.

okay, do you know anyone who offers this service to make a special temnplate?