PageFly - Media element

373 views 0

In this article, you will learn about Media element and how to use it.

About Media element

Media element can make your page more attractive, and consequently increase conversion rate.

This element lets you add many types of media to your page, such as Soundcloud, HTML5, Vimeo and Youtube.

Where Media element located

As a result, our team will soon add more types of media so you can enjoy better options for your page content.

Media element configuration

Media element includes Soundcloud, HTML5, Vimeo and Youtube, which allow you to spice up the content. Using them smartly, your page will grow better traffic and a higher conversion rate.

SoundCloud

To start, drag the SoundCloud to the layout and select it to see its variables.

General tab configuration of SoundCloud

The variables in General tab are specific for this element.

However, those in Styling and Advanced tabs are common for all elements. Read about them here.

CONTENT
Soundcloud URL Insert your Soundcloud track URL here
Autoplay Autoplay your soundtrack
Show Buy Button Show buy button of Soundcloud. The user will be redirected to a Soundcloud page
Show Username Show username of Soundcloud account

HTML5/Video

First, drag the HTML5 to the layout and select it to see its variables.

General tab configuration of HTML5/Video

The variables in General tab are specific for this element.

However, those in Styling and Advanced tabs are common for all elements. Read about them here.

CONTENT
Video Source Add the video source, just keep in mind the file size must be less than 2MB.

Supported video format: mp4, ogv and webm.

Video Image Cover Add a cover image to the video
Loop Video plays constantly non-stop in loop
Autoplay Turn on/off the autoplay feature
Mute Turn on/off the video’s sound
Show Controls Show the video player control

Vimeo

Let’s see what the Vimeo element offers in its variables.

General tab configuration of Vimeo

The variables in General tab are specific for this element.

However, those in Styling and Advanced tabs are common for all elements. Read about them here.

CONTENT
Vimeo Video URL The full URL of your Vimeo video
Video Image Cover Add a cover image to the video
Ratio Select the video ratio display 4:3 or 16:9
Loop Video plays constantly non-stop in loop
Autoplay Turn on/off the autoplay feature
Mute Turn on/off the video’s sound
Show Portrait Show / Hide video uploader’s portrait
Show By Line Show / Hide video uploader’s name
Show Title Show / Hide video title

Youtube

Let’s drag the Youtube element to the layout and explore its variables.

General tab configuration of Youtube

The variables in General tab are specific for this element.

However, those in Styling and Advanced tabs are common for all elements. Read about them here.

CONTENT
Youtube Video URL The full URL of your Youtube video
Video Image Cover Add a cover image to the video
Ratio Select the video ratio display 4:3 or 16:9
Loop Video plays constantly non-stop in loop
Autoplay Turn on/off the autoplay feature
Mute Turn on/off the video’s sound
Show Controls Show / Hide video uploader’s portrait
Show Title Show / Hide video title
Show Related Video Show / Hide related video after the video is done playing

Important:

  • First, do not use the HTML5 element and “Youtube embedded” code. If you do that, the video won’t be responsive on mobile/tablet devices. As a result, the embedded code has a fixed width and it will break the responsive layout.
  • Second, the autoplay feature works only when the Mute option is also enabled due to Youtube new API policy about autoplay. Plus, the Autoplay feature doesn’t work on tablet/mobile devices because of their default operating systems.