Knowledge Base kyvio Smart Funnels Visual Editor Elements

            How do I create a scrolling/sticky video inside your Kyvio page ?

            Note: This guide will only work for YouTube videos that you want to use inside your Kyvio pages

            What is a sticky video?
            A video that you put somewhere on your page, then when the user plays the video and decides the scroll down making the video disappear from the viewport in the browser the video instead of disappearing will move to either right or left side of the page in a small frame hovering above all content to always have it visible.

            Sticky video example

            In order to do the same with your Youtube video on a Kyvio page we created this guide for you.

            Step 1:
            Lets go and open our page editor for the page where you want your sticky video

            Smart Funnels---------------> Open the desired Funnel -----------------> And open up your page with the Edit button

            Step 2
            After doing so we need to add a HTML element the page where we want the video to show.

            Go to the
            Elements button-----------> Miscellaneous  --------------> HMTL ----------------------> and drop the HTML element where you want your video to be placed on your page

            Step 3
            Now that you have placed your element, it is time to open the setting for that element so we can insert our HMTL code. 
            You can find the HTML code you need at the bottom of this article as an attachment called 'html-code.html'. 

            You will have to open the HTML file in any plain text editor (e.g. notepad; NOT Word) so you can see the code! Then copy this code and paste it in.

            Once you have copied and pasted that particular code, it is essential that you replace the {YT-VIDEO-ID-HERE} with your YouTube video ID

            You can find the YouTube video ID in every video after the EQUALS symbol:

            Step 4
            Now all you have to do is add 2 more pieces of code to make it all work. We recommend that you do not alter these codes if you do not know what you are doing.

            The next code that you will need to place will be in the Options menu inside the visual editor and click on the Script/Tracking code, add the code from 'styling.html' in the Head script. Again make sure to open styling.html in any plain text editor (NOT Word) and then copy the full code.

            Step 5
            The last step that you will need to take is to copy and paste one more piece code in the Footer script.
            This time the 'js.html' file. Again open it in any plain text editor (e.g. Notepad, NOT Word) and copy the complete code).

            Go to Options menu ------> Script/Tracking code ------> Footer Script

            After you have done all of this, simply click on the save button and preview your page, after playing your video, and when you are scrolling down on the page, your Youtube video will follow you along.

            P.s. If you don't have any plain text editor installed on your computer (who doesn't have Notepad?) you can also just open the files in your browser and then use 'view source' to copy the code :).

            Attachments (3)
            Updated: 12 Apr 2018 09:05 AM
            Help us to make this article better
            0 0