1. Home
  2. Pages
  3. Add a full-width video banner to a custom page

Add a full-width video banner to a custom page

You can now add a full width video banner to a custom page like this one: http://ranger.pixpa.com

To achieve this, follow these steps:

Create a custom page or edit your existing custom page where you want to add the full-width video banner.

In the custom page Edit mode, from the right column, go to the Videos category.

page_builder_-_easystudio

page_builder_-_easystudio1

From the video content blocks, drag-and-drop the Full-Width Video Banner content block to the stage.

page_builder_-_easystudio2
After placing the video content block on the stage, click on the blue icon to access the HTML code of the content block.

page_builder_-_easystudio23

In the HTML code of the video content block, you need to replace the lines of code highlighted below with the embed code for your video.

page_builder_-_easystudio24

 

For embedding a YouTube video:
Replace the highlighted code above with the code below (instead of Video_ID, put your actual video id):

<iframe width=“100%” height=“100%” src=”https://www.youtube.com/embed/Video_ID?vq=hd1080 rel=0&amp;controls=0&amp;showinfo=0&amp;loop=1&amp;autohide=1&amp;autoplay=1″ frameborder=”0″ allowfullscreen=“”></iframe>

How to get YouTube Video Id?
The video id is the highlighted part of your YouTube video link:
https://www.youtube.com/watch?v=E9NvIzGtkq8


For embedding a Vimeo video:
Replace the highlighted code above with the code below (instead of Video_ID, put your actual video id):

<iframe src=”https://player.vimeo.com/video/Video_ID?autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0″ width=”100%” height=”100%” frameborder=”0″ webkitallowfullscreen=”” mozallowfullscreen=”” allowfullscreen=””></iframe>

How to get Vimeo Video Id?
The video id is the highlighted part of your YouTube video link:
https://vimeo.com/101965651


After you have replaced the video embed code with your video, just save the HTML code.

page_builder_-_easystudio25


You can now edit the banner text and button. You can delete the button if you want to.

page_builder_-_easystudio25

When you are done, Save your changes.

page_builder_-_easystudio26

 

Was this article helpful?

Related Articles