# Picture in Picture Missing?

**URL:** <https://devforum.zoom.us/t/picture-in-picture-missing/15752>\
**Category:** Web\
**Created:** [May 1, 2020, 6:00pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752 "2020-05-01T18:00:49Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [May 1, 2020, 6:00pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/1 "2020-05-01T18:00:49Z")

</div>

**Description**  
Users are saying they’re not seeing the picture in picture after their partner joins. When they join the meeting, they can see themselves, when the other person joins they can only see them and the popover of the local video feed is not visible.

Is there a setting to enable this that I’ve mised?

**Error**  
No Picture in Picture window with local stream.

**Which version?**  
1.7.6

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:  
Happening with any meeting we create.

We see this in the Web Client but not in the SDK which seems odd.

---

<div class="post-metadata">

**Author:** ![flippyhead](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/flippyhead/32/3578_2.png) [@flippyhead](https://devforum.zoom.us/u/flippyhead)\
**Post date:** [May 2, 2020, 1:14pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/2 "2020-05-02T13:14:11Z")

</div>

We are also seeing this.

To be clear: when the host is sharing his/her screen the video of the host is no longer displayed in a small draggable window. But this DOES work if you use the zoom hosted web client. It has stopped working, suddenly, on 1.7.5 and above versions of the Web SDK.

---

<div class="post-metadata">

**Author:** ![flippyhead](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/flippyhead/32/3578_2.png) [@flippyhead](https://devforum.zoom.us/u/flippyhead)\
**Post date:** [May 2, 2020, 1:18pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/3 "2020-05-02T13:18:54Z")

</div>

And to add to the confusion, I’ve noticed the if you leave web Web SDK running for a while (again, while someone is screen sharing with their video enabled) sometimes their video will in fact appear. I’ve only seen it happen once though, otherwise it does not appear.

---

<div class="post-metadata">

**Author:** ![flippyhead](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/flippyhead/32/3578_2.png) [@flippyhead](https://devforum.zoom.us/u/flippyhead)\
**Post date:** [May 2, 2020, 1:22pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/4 "2020-05-02T13:22:11Z")

</div>

And finally, it seems to be an issue with where the camera feed is placed. When going full screen you can find it and see it, but when not in full screen mode it’s not visible, presumably because its offscreen somewhere.

---

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [May 4, 2020, 8:47pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/5 "2020-05-04T20:47:38Z")

</div>

Update, we found the broken box which shows the sizing buttons, but the picture is not visible and it only shows up when you enter fullscreen mode and exit it then the corner is right under the fullscreen button which I only noticed by accident since it flashed when my mouse brushed over it.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/e/e49e897cec5dd8e6ea28fb96688751af62aa22f5.png)

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 7, 2020, 4:41pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/6 "2020-05-07T16:41:28Z")

</div>

Hey @sales1, @flippyhead,

Thanks for sharing this, we will investigate. (CS-1715)

@sales1, you should be able to see yourself when you click the bigger rectangle icons:

![websdk](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/2/23f419eae2e654be2817fd56a8bf9f0c910a79af.png)

-Tommy

---

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [May 7, 2020, 5:10pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/7 "2020-05-07T17:10:51Z")

</div>

No such luck, unfortunately. And it takes a hefty amount of clicking and hovering to even activate the PiP window at all.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/1/156475d9f5be6a741508894d254f2c169e3eab8a.png)

---

<div class="post-metadata">

**Author:** ![flippyhead](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/flippyhead/32/3578_2.png) [@flippyhead](https://devforum.zoom.us/u/flippyhead)\
**Post date:** [May 8, 2020, 9:09pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/8 "2020-05-08T21:09:42Z")

</div>

To be clear: when the host is sharing his/her screen the video of the host is no longer displayed in a small draggable window. But this DOES work if you use the zoom hosted web client. It has stopped working, suddenly, on 1.7.5 and above versions of the Web SDK.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 13, 2020, 5:19pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/9 "2020-05-13T17:19:50Z")

</div>

Hey @sales1, @flippyhead,

After investigating this issue with our Web SDK engineers, we want you to check if you are importing / linking the Zoom Web SDK CSS files more then once. This seems to cause the issue.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [May 13, 2020, 5:34pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/10 "2020-05-13T17:34:27Z")

</div>

> [@tommy](#):
>
> we want you to check if you are importing / linking the Zoom Web SDK CSS files more then once

These are the only 2 included CSS files in the header (there are no additional files in the body).

![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/optimized/2X/1/1abe779b3f1c77a94e36d64f63180a556166a21c_2_690x72.png)

---

<div class="post-metadata">

**Author:** ![michael\_p.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael_p.zoom/32/18105_2.png) [@michael\_p.zoom](https://devforum.zoom.us/u/michael_p.zoom)\
**Post date:** [May 16, 2020, 12:04am UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/11 "2020-05-16T00:04:36Z")

</div>

Hi @sales1 @flippyhead,

Can you email us your index.js file along with marketplace developer email and meeting ID used at [developersupport@zoom.us](mailto:developersupport@zoom.us)? We want to make sure nothing is overriding the imported files.

Thanks

---

<div class="post-metadata">

**Author:** ![flippyhead](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/flippyhead/32/3578_2.png) [@flippyhead](https://devforum.zoom.us/u/flippyhead)\
**Post date:** [May 27, 2020, 7:26pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/12 "2020-05-27T19:26:58Z")

</div>

@michael_p.zoom reply re-sent, hoping for some kind of update here. Thank you!

---

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [May 27, 2020, 8:02pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/13 "2020-05-27T20:02:03Z")

</div>

Me too! I emailed Developer Support 7+ days ago as requested and have not received a response as of yet. ☹

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [June 2, 2020, 7:03pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/14 "2020-06-02T19:03:57Z")

</div>

Hey @sales1, @flippyhead,

We are seeing this happen to folks who are over ridding the Zoom CSS or have conflicting styles.

Please try commenting out your style links and only including the [Zoom CSS](https://www.npmjs.com/package/@zoomus/websdk#usage) and see if that fixes the issue. (CS-1715)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [June 3, 2020, 2:03pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/15 "2020-06-03T14:03:17Z")

</div>

I commented out the 2, heavily prefixed, styles we had on the page, cleared the cache and confimed the page source was updated, and this is still exhibiting the same behaviour.

---

<div class="post-metadata">

**Author:** ![sales1](https://avatars.discourse-cdn.com/v4/letter/s/ed655f/32.png) [@sales1](https://devforum.zoom.us/u/sales1)\
**Post date:** [June 4, 2020, 2:44pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/17 "2020-06-04T14:44:03Z")

</div>

Anyone else having this issue should ensure they have a `<!DOCTYPE html>` tag at the top of the page. I’m not sure why this breaks the PiP, and only PiP, but after stripping the minimal, prefixed, css that controlled a loading spinner overlay, to make our HTML look like a stripped down version of what was in the Sample App, the only difference was the missing DOCTYPE and until we added that the PiP would not work.

This is the weirdest issue I’ve ever seen. Browsers have been gracefully handling a missing DocType for a very long time. Any idea what specifically with the Zoom Web SDK would break because it was missing?

When I view the page source (in FF at least) the DocType is added automatically at the top for the pages where it was not added explicitly.

While glad this is resolved, I’m more confused about the solution than the problem.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [June 9, 2020, 5:04pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/18 "2020-06-09T17:04:15Z")

</div>

Hey @sales1,

Happy to hear you figured out the issue. 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![flippyhead](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/flippyhead/32/3578_2.png) [@flippyhead](https://devforum.zoom.us/u/flippyhead)\
**Post date:** [July 9, 2020, 9:12pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/19 "2020-07-09T21:12:49Z")

</div>

Hello, this is NOT due to incorrect CSS usage. I have conclusive proof this is intentionally done by the Zoom Web SDK and I’m kind of surprised no one seems to know about it.

Using the WebSDK when the viewport goes below a certain width the DIV which containers the speaker video (while the speaker is screen-sharing) has its class name change from “suspension-content2” to “suspension-canvas-hide”. As the viewport increases in width, the reverse happens. When the “suspension-canvas-hide” class name is used, the PiP window is hidden.

It did NOT use to work this way, around 1.7.5 and before. We very much prefer the old way this worked or at least the option to disable or adjust the width being used.

Though minified, looking at [https://source.zoom.us/zoom-meeting-1.7.10.min.js](https://source.zoom.us/zoom-meeting-1.7.10.min.js) you can see the code which does this:

> (S=“”.concat(T.width?“”:“suspension-fix-height”," suspension-content2")

Thank you!!

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 13, 2020, 8:50pm UTC](https://devforum.zoom.us/t/picture-in-picture-missing/15752/20 "2020-07-13T20:50:15Z")

</div>

Hey @flippyhead,

We are looking into what changed and fix this. (CS-1715)

Thanks,  
Tommy
