Using VTurb with Wix

In this guide, you'll discover how to effectively integrate VTurb with Wix to embed your video seamlessly.

Let's get started:

Accessing VTurb’s Dashboard:
- After logging into VTurb, you'll encounter a dashboard displaying all of your videos.
- Press on the </> symbol to proceed to copy the JS code.



Copying the Code:
- Upon clicking to copy the code, a pop-up will appear at the top of your page as a confirmation.


Navigating to Wix Editor:
- On your Wix page editor, click on the "+" icon located at the top left corner of your page.
- This action will prompt a menu to appear, offering a multitude of element options.


Locating the 'Embed Code' Element:
- From the displayed elements, search for the 'Embed Code' element. This is what we'll use to add our video.


Selecting the 'Embed HTML' Element:
- Give it a single click. Upon doing so, a customizable box will pop up on your page. If you need to resize the box to fit your video perfectly, simply click, hold, and drag its edges. Remember, if you're incorporating a button linked with VTurb, ensure the box is sufficiently tall to accommodate both the video and the button.



Adjusting Settings:
- Click on the gear icon, symbolizing 'Settings', and another box will pop up.


Pasting the Video and the Code:
- Within the settings box, ensure the 'Code' option is selected.
- Where it says "add your code here", paste the following:

html
htmlCopy code
<allow script><style>.smartplayer-video-wrap{height: initial!important;}
#smartplayer#smartplayer#smartplayer .smartplayer-video-wrap .smartplayer-video{height: initial!important;}
.smartplayer-call-action { text-align: center!important; padding: 40px 0!important; }
@media (max-width: 448px){ .smartplayer-call-action a.smartplayer-call-action--link{
font-size: 16px!important; width: 100%!important;padding: 15px 0px!important; }}
@media (max-width: 337px){ .smartplayer-call-action a.smartplayer-call-action--link{ font-size: 14px!important }} </style>

Right after pasting the above code, insert the JS embed code that you copied from VTurb.
- Once done, press "Update".
- The sequence should resemble:

Code from step number 7
Your JS embed code

→ Remembering the Button’s Space:

- If you're utilizing a VTurb integrated button, remember to allocate enough space beyond the video in the widget box to ensure it displays correctly.



There you have it! Your video should now be playing flawlessly on your Wix page. 😊

💡A friendly reminder: Always safeguard your content. Make sure to add your domain(s) to the 'Security' tab to provide additional protection for your VSLs.

Want to dive deeper? Check out:

The nitty-gritty of Iframe vs. JS code

Learn how to use VTurb in your page builder!

Updated on: 12/17/2024