Demo buchen Demo
Demo anfordern
Help Center

How do I embed a video in my publication?

Product: FlippingBook Publisher

Note!Only the Professional and Business editions of FlippingBook Publisher have the option to add videos to flipbooks. FlippingBook Publisher Basic does NOT have this possibility.

Embedding videos is easy with FlippingBook Publisher. In this article, we will tell you how you can do it and give you some related information:

 

Embedding your YouTube, Vimeo or Wistia videos

The easiest way to embed a video is to first upload it to YouTube, Vimeo or Wistia. Then copy the link to your video:

  1. On YouTube or Vimeo, copy the URL of the video from the address bar of your browser.
  2. If you have an account with Wistia, just open your video project there, open the video, and copy the URL of your video from the address bar of your browser at the top of the web page:

  3. Now in FlippingBook Publisher, go to the page where you want to add your video and click on the Content Editor button.

  4. The Content Editor will open in a new window, overlapping your publication. Now you can add a video by choosing the Video option on the left:

  5. A blue rectangle represents an area in which the video will appear in your flipbook. You can change its size or position on the page by dragging its corners with the mouse. For the final pixels, you can also use the arrow keys.

  6. Paste the URL to your video in the Video URL field.

If required, you can now fine-tune further settings for your video.

Embedding videos from other servers

If you have a video in MP4 format that is hosted on your own (or a third-party) server, and that server allows embedding into other sources, you can also use that instead of a hosted video service like YouTube or Vimeo.  

  1. Make sure your video is in MP4 format. If it’s not, you can convert it with Free Convert or similar services.
  2. Make sure that the CORS settings for the server where the video is located allow embedding. Learn more
  3. Open your project in FlippingBook Publisher and go to the page where you want to add your video. Click on the Content Editor button.
  4. The Content Editor opens in a new window that overlaps your publication. Select Video from the options on the left.
    A blue rectangle represents an area in which the video will appear in your flipbook. You can change its size or position on the page by dragging its corners with the mouse.
  5. Paste the link to your MP4 file in the input field under Video and tune the settings as required.
  6. Close the Content Editor and (re-)upload your updated publication.

Tip! When using MP4 videos, we advise you to optimize them first to a size that approximately corresponds to the size in which you show them in your flipbook. Optimizing prevents stutter, reduces loading times, saves bandwidth, and can even improve quality - severe resizing in the browser often looks worse than resizing by a dedicated tool. 

 

 

Embedding local video files

If you host the publications on your own servers, then there is no need to upload the video anywhere! You can add it directly to the project file.

Warning!It is not possible to publish to FlippingBook Cloud if you add mp4 files directly! If you upload your projects to FlippingBook Cloud, you will need to upload the mp4 file to a hosted video service like YouTube or Vimeo, or to your own server. 

    1. Make sure your video is in MP4 format. If it’s not, you can convert it with Free Convert or similar services.
    2. Open your project in FlippingBook Publisher and go to the page where you want to add your video. Click on the Content Editor button.
    3. The Content Editor opens in a new window that overlaps your publication. To add a video, select Video from the options on the left.
    4. A blue rectangle represents an area in which the video will appear in your flipbook. You can change its size or position on the page by dragging its corners with the mouse.
    5. Select the option File and pick an MP4 file from your device you’d like to add.

      You can tune the settings as required.

You can now upload the project to your own server as usual.

Tip! When using MP4 videos, we advise you to optimize them first to a size that approximately corresponds to the size in which you show them in your flipbook. Optimizing prevents stutter, reduces loading times, saves bandwidth, and can even improve quality - severe resizing in the browser often looks worse than resizing by a dedicated tool. In fact, this is one of the reasons why we advise services like YouTube and Vimeo: they take care of this automatically, even adjusting if your visitors' internet connection speed is slow.

 

Manage your video settings

The Video Settings are located in the bottom-left corner of the screen. Apart from the URL, there are several other options.

For every video, you can set the following settings individually:

  • Preview Image will show the Youtube/Vimeo thumbnail of your video in your flipbook if you set this to Preview from the video. If you will Remove Image then the area will be completely transparent apart from the ‘Play’ button. This is useful if your publication already contains a suitable image that you want to link to the video. You can also select a custom image as a preview.
  • Aspect Ratio defines the relation between the width and the height of your thumbnail. 16:9 and 4:3 are fixed formats. This means that if you increase the width, then the height is also increased correspondingly. If you select Custom, then you can set any size you like.
  • Display Mode allows you to set how you want your video to open in your publication. 
    • Auto tries to play the video directly in your publication;
    • Pop-up window will open your video in a pop-up window.
  • Autostart will start playing the video automatically when your users open the page with it. When you deselect this, then your users will have to manually press the play button in the pop-up player to start playing the video.

There are some situations where the video cannot be played directly on your page, even though you selected the Auto mode. In this case, we show it in a pop-up anyway. This happens when:

  • you view your flipbook on an iOS smartphone;
  • you open your book in Safari on a desktop;
  • your video is located in the middle of a wide page;
  • your video is less than 144 pixels wide or less than 100 pixels high. (Note that the size of pages is changed dynamically, affecting the video as well. This means that if your users resize the window of their browser or view on a screen with a different resolution, then this will affect the size of the video and thus the behavior)
 

Fine-tune the icon for your video

Starting with FlippingBook Publisher 2023.1 you can change the icon settings for your videos. Here are the options you can choose for your icon:

Visibility - you can control when the icon appears: always, never, or when someone hovers over your content with their mouse.
Size - you can choose your icon to be small, medium, or big. Bigger icons are more noticeable whereas smaller icons are less intrusive.
Position - the location of the icon on your interactive element. Here you can choose 5 different positions - top left, bottom left, the central one, top right, and bottom right.

To fine-tune your video icon, follow the steps below:

  1. Open the Content Editor and click on the video for which icon you would like to change.
  2. Unfold the Icon settings if required.
  3. Change the options for the Visibility, Size and Position to your liking.
  4. Once you close the Content Editor all your changes will be applied to your project.

Every option you choose for your icon can be applied to all the elements of this type in your current project. E.g. if you want to change the visibility of all the icons for the videos in this flipbook to 'On hover'. To do so, change it for one video. Then use the fast-forward icon next to it, to apply the setting to all other videos:

Once you have finished placing and setting your video, you can simply close the Content Editor and FlippingBook Publisher will save the changes automatically.

Note!The video is visible in your flipbook, but if you click on it, it won't be played within FlippingBook Publisher itself. If you upload your flipbook, it will work fine.

Other Resources

drift chat