How to add picture in picture

Create a picture-in-picture overlay

You can place one video clip in a small frame over a background video clip that covers the entire screen. This effect is called a picture-in-picture overlay.

For information about superimposing one clip over another by creating transparent backgrounds, see About superimposing and transparency.

Create a picture-in-picture overlay in the Quick view

The selected clip appears in the Monitor panel.

From the Graphics panel, drag an image on to the background clip in the Monitor panel. If necessary, adjust the duration of the overlay in the Picture In Picture dialog box.

From Windows Explorer, drag a clip or image on to the background clip in the Monitor panel, and select Picture In Picture. If necessary, adjust the duration of the overlay in the dialog box.

If the superimposed clip is longer than the background clip, it appears over successive clips in the Quick view timeline for its entire duration. The clip also appears superimposed over those clips during playback.

Create a picture-in-picture overlay in the Expert view

The selected clip appears in the Monitor panel.

From the Graphics panel, drag an image on to the background clip in the Monitor panel.

From Windows Explorer, drag a clip or image on to the background clip in the Monitor panel, and select Picture In Picture.

From the Project Assets panel, drag a clip or image on to the background clip in the Monitor panel, and select Picture In Picture

If the superimposed clip is longer than the background clip, it appears over successive clips in the Expert view timeline for its entire duration. The clip also appears superimposed over those clips during playback.

This Guided Edit is a tutorial on creating a picture in picture. You can place a graphic or video on top of a background video.

To create a picture in picture using this Guided edit, follow these steps:

This Guided Edit is a walkthrough on placing a graphic or video over top of a background video. Click Back and Next to move forward or backward in the guided edit’s steps.

Click Add media to import the video clip you add scores to. Ignore if the video clip is already present on the timeline.

Select the option to import media.

Select Guided > Creating a Picture in Picture.

Move the CTI to the location where you want the Picture in Picture effect to begin.

Open a file explorer window and drag-and-drop the video you want to appear in the foreground.

Select the Picture in Picture option.

Enter the duration in the Picture in Picture dialog box. You can increase or decrease the duration of the picture in picture effect.

Adjust the position of the overlay, drag the desired location in the Monitor panel.

Resize the handle on the corner of the video clip or graphic and drag it to adjust its size or rotate the overlay. Click Done.

Overlay Images Online for Free

Overlay images together to give them a new look in seconds.

With countless ways of superimposing images, the possibilities for creativity are endless!

Instantly Add Picture to Picture

Fotor’s free online photo editor makes it super easy to put a picture on a picture. Simply upload two or more pictures then use Fotor’s drag-and-drop tools to move them around, rotate or resize them until you find a perfect combination! Enjoy having everything done right from your web browser- no need to download any software! It’s fast and simple.

Superimpose Images to Create Double Exposure Effects

Easily apply the trendy double exposure effect to your photos with Fotor. All you have to do is select two images, then adjust the transparency level to mix and blend them into one. You can get a ghost-like, surreal photo in seconds. Experiment with it today to give your shots a dreamy mood.

Overlay Multiple Images to Create a Create

Unlock your creative genius when it comes to overlaying images. You can use our AI-powered background remover to extract people, animals and any other object from images in an instant. So you can combine them to create creative composite images. Plus, you’ll have access to a massive library of design assets. Add stickers, icons, fonts, or illustrations to create outstanding designs!

Take Your Images to Next Level with A Well-Rounded Photo Editor

Fotor is a versatile photo editor that comes with a variety of photo editing tools. It helps you edit your images like a pro and turn them from average to fantastic. From overlaying images and applying photo effects to improving photo quality and retouching portraits, Fotor has them all. Sign up for Fotor now and get access to all these amazing features and tools for free.

How to Overlay Pictures?

Overlay Image FAQs

How to put a photo on top of another photo?

You can easily put a photo on top of another photo using Fotor, a free online photo editor. Simply drag and drop the image you want to overlay into Fotor- this will become your background picture. Then add a new image over it. You can adjust the transparency levels to blend two images together perfectly. You can also choose from hundreds of photo effects to make your composite images more creative!

How to overlay pictures on iPhone?

Fotor’s photo editor for iPhone packs a variety of editing tools that lets you overlay pictures in seconds.

Overlay One Picture on Another Picture Online in Seconds

Explore a host of handy editing tools and features that Fotor photo editor offers. You can overlay images, superimpose images or add a picture to other pictures with ease!

What Our Users Say about Fotor

The 2nd generation of digital image enhancers and designers after Photoshop.

5 Best Ways to Insert Picture into Picture

With Picverse, it’s easy to insert one image into another:

In this guide, we’ll show you how to add a photo to a photo in a range of different apps, on computers and on tablets, and smartphones.

Why you might want to insert a picture in another picture

There are all kinds of reasons why you might want to add an image to a photo. You might be wanting to make a meme to share online, such as the “how it started / how it ended” meme. You might want to create a before and after image showing something great you’ve achieved or created. Or you might want to combine two images in interesting ways, for example, by replacing the background of an image with something completely different or by putting someone from one photograph in another, completely different photo.

The combinations you can make will depend on the app you’re using, so for example, you can do interesting things with backgrounds in Picverse Photo Editor that you can’t do on your phone’s default Photos app or in Preview on a Mac.

Let’s discover how to insert images in Photoshop ® and other popular apps.

How to Insert Image in Photoshop ®

How to Add a Photo to a Photo with Picverse Photo Editor

Placing a picture in a picture is very easy in Picverse Photo Editor. Here’s how to add photos to another photo.

Step 1. Add Your Image to the Program

Click on Browse for Images and locate the photo you want to use as the main image or background.

Step 2. Mark the Foreground Objects

Click on the Change Background tab. Now we need to tell Picverse Photo Editor what bits we’d like to replace. Using the green Foreground Brush, highlight the area you want to keep. You don’t need to do this with great precision: you’re really just pointing the app at the appropriate bit. Picverse will take care of the hard bits.

Step 3. Mark the Background Objects

Switch to the red Background Brush and repeat the process, this time highlighting the area you want to replace.

Step 4. Specify the Borders

Click Next Step and use the Hair Selection Tool to make the finer details clear.

Step 5. Change and Adjust the Background

Click Next Step, and you should see the Change Background option. Click on Add Image, and you’ll see thumbnails of the available backgrounds; click on Upload if you’d like to add a different background image.

Select your new background, and you’ll see it in your image. Use the Blur Edges and Shift Edges to make it look just right; you can also access tools to crop and recolor your image at this point. Click on Apply when you’re happy with how it looks.

Step 6. Save Your Image

To save the photo, click Save, choose the appropriate image format, and click OK.

How to Add a Picture to a Picture on a Mac

It’s really easy to add a picture to a picture on a Mac. You don’t need a dedicated app, just the Preview app that came with macOS. Here’s how to add a photo to a photo in the Preview app.

How to Insert a Photo on a Photo on an iPhone

If you want to know how to insert a photo in a photo on an iPhone, you’ll need to find an appropriate app: the standard Photos app doesn’t have that feature. The best search term to use in the App Store is “collage,” and one of the best such apps is PicCollage: in addition to combining images, you can draw on them, cut out bits or backgrounds and add stickers.

Here’s how to add a picture to a picture in PicCollage.

How to Add an Image to a Photo on Android

Android has the same issue as the iPhone: the default photos app is for editing individual images, not combining multiple ones. That means it’s time for a trip to the Play Store, which is absolutely packed with apps that enable you to insert a picture into a picture. Our favorite is PicCollage, which you’ll find on the Google Play Store.

Here’s how to add an image to a photo in PicCollage for Android.

Ben is a writer from the UK with qualifications in Media and Music Technology, he specializes in software reviews and tutorials. Ben has been blogging about media and tech subjects since he was a teenager from his base in the East of England.

Picverse Photo Editor

Easily enhance images and get professional-grade results in a snap.

*The free version of Movavi Picverse Photo Editor has the following restrictions: you can save up to 10 images with added watermark, screenshots are disabled. Learn more

Frequently Asked Questions

How do I make sure I get the best results when I add a photo to another photo?

One of the most important things to consider is the quality and color of your images: if you’re trying to make something that looks realistic, you don’t want to stick a really low-resolution image on a high-resolution one or put an object shot in daylight on a background where the sun is coming from a different direction or at a completely different time of day.

What can I do if my two photos don’t quite match?

Many image editors are designed to do all kinds of corrections, so for example, you can adjust the color balance, the brightness, and so on. If your image editor uses layers, different parts of your final image are kept on separate layers that can be adjusted independently. For example, you might want to make the object in the foreground brighter without also lightening the background.

In powerful editors, you also get all kinds of layer effects that change how the different layers in your image appear.

If your particular image editor doesn’t support layers, it’s really important that you get your color adjustments and effects sorted before you combine your images together. If you don’t, you may find that you can only make global adjustments rather than adjustments to just part of the image.

How can I put two photos side by side?

The quickest way is to create a new image and then copy each photo individually. Not all apps can do that, though, so for example, Preview on the Mac doesn’t enable you to create a new image of a specific size. No problem: open one of your images, copy it and choose File > New From Clipboard. This creates a new copy of the file. Now, go to Tools > Adjust Size. Click on the icon of a padlock to unlock it and then double the width. Press Cmd + A to select everything and tap delete. You’ve now got a perfectly sized blank canvas that you can paste your images on. In a nice touch, Preview will display yellow rulers when your second image is in line with the first one. These rulers make it easier to snap to the perfect position.

I’ve put a photo in a photo, and I’ve changed my mind. Now what?

That depends on the app you’re using and when you changed your mind.

If you’re still in the app with the finished image open, just use the undo button (or Cmd + Z on a Mac; Ctrl + Z on a PC) a few times to undo your changes.

In an app that uses layers, your project file will retain all the different layer information so you can make as many changes as you want at any time. You can then re-export your edited image.

Not all editors have that feature, however. On your phone, that isn’t an issue because third-party apps save their collages as new images (and in the iPhone photos app, any edits you make there are non-destructive, too. Which means you can go back to the original any time). But on a computer, apps such as Preview on the Mac don’t save in a format that keeps the layers intact: once you’ve closed the image file, the changes are permanent.

Don’t worry, though; there’s a fix. One of our favorite Mac commands is Revert To Saved, which you can use to rewind time. Just open the image in Preview and choose Revert To. This gives you the option to revert to the last saved version or to browse all the previously saved versions of the file. The same command is available in other apps too.

What is the best app for adding a photo to a photo?

That really depends on what other features you want to have, such as intelligent background removal or AI-powered photo restoration: you won’t get them in an app designed to combine two images and put stickers on the top. Naturally, we’re going to recommend Picverse Photo Editor because it’s great, but there are lots of image editing apps out there, and the steps we’ve outlined above apply to many of them.

Picture-in-Picture

More details about this document

Abstract

This specification intends to provide APIs to allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.

Status of this document

This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

Feedback and comments on this specification are welcome. GitHub Issues are preferred for discussion on this specification. Alternatively, you can send comments to the Media Working Group’s mailing-list, public-media-wg@w3.org (archives). This draft highlights some of the pending issues that are still to be discussed in the working group. No decision has been taken on the outcome of these issues including whether they are valid.

This document was published by the Media Working Group as an Editor’s Draft. This document is intended to become a W3C Recommendation.

Publication as an Editor’s Draft does not imply endorsement by W3C and its Members.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

1. Introduction

This section is non-normative.

Many users want to continue consuming media while they interact with other content, sites, or applications on their device. A common UI affordance for this type of activity is Picture-in-Picture (PiP), where the video is contained in a separate miniature window that is always on top of other windows. This window stays visible even when the user agent is not visible. Picture-in-Picture is a common platform-level feature among desktop and mobile OSs.

This specification aims to allow websites to initiate and control this behavior by exposing the following sets of properties to the API:

Notify the website when it enters and leaves Picture-in-Picture mode.

Allow the website to trigger Picture-in-Picture mode via a user gesture on a video element.

Allow the website to know the size of the Picture-in-Picture window and notify the website when it changes.

Allow the website to exit Picture-in-Picture mode.

Allow the website to check if Picture-in-Picture mode can be triggered.

The proposed Picture-in-Picture API is very similar to [Fullscreen] as they have similar properties. The API only applies to HTMLVideoElement at the moment but is meant to be extensible.

2. Examples

2.1. Add a custom Picture-in-Picture button

2.2. Monitor video Picture-in-Picture changes

2.3. Update video size based on Picture-in-Picture window size changes

3. Concepts

3.1. Internal Slot Definitions

An list of zero or more origins, which is initially empty.

Note: In case a user agent supports multiple Picture-in-Picture windows, the list allows duplicates.

An origin is said to have an if any of the origins in initiators of active Picture-in-Picture sessions are same origin-domain with origin.

3.2. Request Picture-in-Picture

If video has no video track, throw a InvalidStateError and abort these steps.

OPTIONALLY, if video ’s disablePictureInPicture is true, throw an InvalidStateError and abort these steps.

If userActivationRequired is true and the relevant global object of this does not have transient activation, throw a NotAllowedError and abort these steps.

Queue a task to fire an event named enterpictureinpicture using PictureInPictureEvent at the video with its bubbles attribute initialized to true and its pictureInPictureWindow attribute initialized to Picture-in-Picture window.

It is RECOMMENDED that video frames are not rendered in the page and in the Picture-in-Picture window at the same time but if they are, they MUST be kept in sync.

When a video is played in Picture-in-Picture mode, the states SHOULD transition as if it was played inline. That means that the events SHOULD fire at the same time, calling methods SHOULD have the same behaviour, etc. However, the user agent MAY transition out of Picture-in-Picture when the video element enters a state that is considered not compatible with Picture-in-Picture.

Styles applied to video (such as opacity, visibility, transform, etc.) MUST NOT apply in the Picture-in-Picture window. Its aspect ratio is based on the video size.

It is also RECOMMENDED that the Picture-in-Picture window has a maximum and minimum size. For example, it could be restricted to be between a quarter and a half of one dimension of the screen.

3.3. Exit Picture-in-Picture

When the is invoked, the user agent MUST run the following steps:

It is NOT RECOMMENDED that the video playback state changes when the exit Picture-in-Picture algorithm is invoked. The website SHOULD be in control of the experience if it is website initiated. However, the user agent MAY expose Picture-in-Picture window controls that change video playback state (e.g., pause).

3.4. Disable Picture-in-Picture

Some pages may want to disable Picture-in-Picture mode for a video element; for example, they may want to prevent the user agent from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases. To support these use cases, a new disablePictureInPicture attribute is added to the list of content attributes for video elements.

The disablePictureInPicture IDL attribute MUST reflect the content attribute of the same name.

If the disablePictureInPicture attribute is present on the video element, the user agent SHOULD NOT play the video element in Picture-in-Picture or present any UI to do so.

When the disablePictureInPicture attribute is added to a video element, the user agent SHOULD run these steps:

3.5. Auto Picture-in-Picture

Some pages may want to automatically enter and leave Picture-in-Picture for a video element; for example, video meeting web apps would benefit from some automatic Picture-in-Picture behavior when the user switches back and forth between the web app and other applications/tabs. To support these use cases, a new autoPictureInPicture attribute is added to the list of content attributes for video elements.

The autoPictureInPicture IDL attribute MUST reflect the content attribute of the same name.

The is the video element, among all video elements with the autoPictureInPicture attribute currently set, whose autoPictureInPicture attribute was set most recently. Note that the autoPictureInPictureElement can have the disablePictureInPicture attribute set. In that case, as expected, it won’t be allowed to enter Picture-in-Picture mode in the request Picture-in-Picture algorithm.

When the visibility state of a top-level browsing context value switches from «visible» to «hidden», the user agent MAY run these steps:

If pictureInPictureElement is set, abort these steps.

When the visibility state of a top-level browsing context value switches from «hidden» to «visible», the user agent MAY run these steps:

3.6. Interaction with Fullscreen

3.7. Interaction with Remote Playback

The [Remote-Playback] specification defines a local playback device and a local playback state. For the purpose of Picture-in-Picture, the playback is local and regardless of whether it is played in page or in Picture-in-Picture.

3.8. Interaction with Media Session

The API will have to be used with the [MediaSession] API for customizing the available controls on the Picture-in-Picture window.

3.9. Interaction with Page Visibility

When pictureInPictureElement is set, the Picture-in-Picture window MUST be visible, even when the Document is not in focus or hidden. The user agent SHOULD provide a way for users to manually close the Picture-in-Picture window.

3.10. One Picture-in-Picture window

Operating systems with a Picture-in-Picture API usually restrict Picture-in-Picture mode to only one window. Whether only one window is allowed in Picture-in-Picture mode will be left to the implementation and the platform. However, because of the one Picture-in-Picture window limitation, the specification assumes that a given Document can only have one Picture-in-Picture window.

What happens when there is a Picture-in-Picture request while a window is already in Picture-in-Picture will be left as an implementation detail: the current Picture-in-Picture window could be closed, the Picture-in-Picture request could be rejected or even two Picture-in-Picture windows could be created. Regardless, the User Agent will have to fire the appropriate events in order to notify the website of the Picture-in-Picture status changes.

4. API

4.1. Extensions to HTMLVideoElement

The requestPictureInPicture() method, when invoked, MUST return a new promise promise and run the following steps in parallel:

Let video be the video element on which the method was invoked.

If the previous step threw an exception, reject promise with that exception and abort these steps.

4.2. Extensions to Document

is false if there’s a user preference that disables it or a platform limitation. It is true otherwise.

The exitPictureInPicture() method, when invoked, MUST return a new promise promise and run the following steps in parallel:

If the previous step threw an exception, reject promise with that exception and abort these steps.

4.3. Extension to DocumentOrShadowRoot

The pictureInPictureElement attribute’s getter must run these steps:

If the context object is not connected, return null and abort these steps.

Let candidate be the result of retargeting Picture-in-Picture element against the context object.

If candidate and the context object are in the same tree, return candidate and abort these steps.

4.4. Interface PictureInPictureWindow

4.5. Event types

Fired on a HTMLVideoElement when it enters Picture-in-Picture.

Fired on a HTMLVideoElement when it leaves Picture-in-Picture mode.

Fired on a PictureInPictureWindow when it changes size.

4.6. Task source

The task source for all the tasks queued in this specification is the media element event task source of the video element in question.

4.7. CSS pseudo-class

The :picture-in-picture pseudo-class MUST match the Picture-in-Picture element. It is different from the pictureInPictureElement as it does NOT apply to the shadow host chain.

5. Security considerations

This section is non-normative.

The API applies only to HTMLVideoElement in order to start on a minimal viable product that has limited security issues. Later versions of this specification may allow PIP-ing arbitrary HTML content.

5.1. Secure Context

The API is not limited to [SECURE-CONTEXTS] because it exposes a feature to web applications that user agents usually offer natively on all media regardless of the browsing context.

5.2. Feature Policy

6. Acknowledgments

Thanks to Jennifer Apacible, Zouhir Chahoud, Marcos Cáceres, Philip Jägenstedt, Jeremy Jones, Chris Needham, Jer Noble, Justin Uberti, Yoav Weiss, and Eckhart Wörner for their contributions to this document.

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

This is an example of an informative example.

Note, this is an informative note.

Conformant Algorithms

Requirements phrased in the imperative as part of algorithms (such as «strip any leading space characters» or «return false and abort these steps») are to be interpreted with the meaning of the key word («must», «should», «may», etc) used in introducing the algorithm.

Conformance requirements phrased as algorithms or specific steps can be implemented in any manner, so long as the end result is equivalent. In particular, the algorithms defined in this specification are intended to be easy to understand and are not intended to be performant. Implementers are encouraged to optimize.