PageFly - Media element

1675 views 1

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 URLInsert your Soundcloud track URL here
AutoplayAutoplay your soundtrack
Show Buy ButtonShow buy button of Soundcloud. The user will be redirected to a Soundcloud page
Show UsernameShow 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 SourceAdd the video source, just keep in mind the file size must be less than 2MB.

Supported video format: mp4, ogv and webm.

Video Image CoverAdd a cover image to the video
LoopVideo plays constantly non-stop in loop
AutoplayTurn on/off the autoplay feature
MuteTurn on/off the video’s sound
Show ControlsShow 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 URLThe full URL of your Vimeo video
Video Image CoverAdd a cover image to the video
RatioSelect the video ratio display 4:3 or 16:9
LoopVideo plays constantly non-stop in loop
AutoplayTurn on/off the autoplay feature
MuteTurn on/off the video’s sound
Show PortraitShow / Hide video uploader’s portrait
Show By LineShow / Hide video uploader’s name
Show TitleShow / 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 URLThe full URL of your Youtube video
Video Image CoverAdd a cover image to the video
RatioSelect the video ratio display 4:3 or 16:9
LoopVideo plays constantly non-stop in loop
AutoplayTurn on/off the autoplay feature
MuteTurn on/off the video’s sound
Show ControlsShow / Hide video uploader’s portrait
Show TitleShow / Hide video title
Show Related VideoShow / 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.

Was this helpful?