We often need to display a YouTube video in a popup or modal. It's a great way to show tutorials, demos, or any engaging video content without taking users away from the page they're on.
For instance, on our integration pages, we use this method to display "how-to" videos.
Let me show you exactly How To Open YouTube Video in Popup with Poper.
1. Create a Poper Account
First things first, you'll need a Poper account. If you don't have one yet, just sign up! Poper lets you create various types of popups, floating widgets, banners, and embeds for your website.
2. Add Your Domain and Start a New Popup
Once you're logged in, add your website domain to the workspace. Then, let's start with creating a fresh popup.
3. Create a Popup From Scratch
Click the "New Popup" button, and you'll be given some choices. Select "Start from Scratch" to begin with a blank canvas.
4. Grab the YouTube Embed Code
Now, head over to the YouTube video you want to use in a new browser tab. Click the "Share" button below the video, and then choose "Embed."
Copy the embed code that appears; we will need this in next step.
5. Copy the Embed Code
Make sure you have copied the embed code from the step above. You will have something like this -
<iframe width="560" height="315" src="https://www.youtube.com/embed/your-video-id" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>6. Open the Poper Popup Editor
Go back to the Poper popup editor, and in the left sidebar, click the "Add" tab. This tab shows all the elements you can add to your popup.
7. Add an HTML Element
Click the "HTML" element from the list. This allows you to embed custom HTML into your popup, perfect for our YouTube video.
8. Paste the Embed Code
Now, in the left sidebar, you'll see an area where you can paste HTML. Paste the embed code you copied from YouTube here.
9. Adjust the Embed Code Dimensions
The default YouTube embed code often has fixed widths and heights. To make it responsive, change the width="560" to width="100%". You can adjust the height to whatever you think will look best in your popup.
So you final code will be something like this -
<iframe width="100%" height="315" src="https://www.youtube.com/embed/your-video-id" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>10. Center the YouTube Video in the Popup
Drag the YouTube video element to the center of the screen or position it as you like using drag and drop.
11. (Optional) Round the Corners
If you want to give your popup a softer look with rounded corners, go to "Global Settings," then "Dimensions," and set the "Overflow" to "hidden".
12. Finalize Customization
Make any other adjustments you feel are necessary, like setting up background color or anything you think will look good in your popup.
13. Set Display Conditions
Click "Next" to move to the display conditions page. Here, you decide when and where your popup will appear. You can have the popup show when a button is clicked.
For example you can use .my-action-button as CSS selector. Then when you add the my-action-button class to your button, then this popup will show when someone clicks on that button.
We also have other triggers such as, scroll, or on page load.
14. Target Audience and Pages
You can also choose the specific pages you want the popup to appear on and target it to specific audiences based on demographics.
15. Save and Publish
Once you're happy with your setup, click "Save & Publish" to make your popup live.
16. Add Poper's Custom Code to Your Site
Now it's time to add the Poper code snippet to your website. Go to the "Code" section in the left navigation bar. Select your platform (like HTML, WordPress, etc.), and follow the setup instructions.
17. Deploy and Test
Finally, deploy the changes to your website and test the popup to ensure it's working as expected.
That's it! You now know How To Open YouTube Video in Popup using Poper. If you have any questions, feel free to reach out.
