Audio & Video

?view=page&help=goldfish4&language=en

Play sound files and videos on your website. This works with an Audio & Video item that you can drag from the items to the website.

You can add an audio and video item to each area, slider area and area template. To add an audio and video item, edit the content of an area, slider or area template and drag an audio and video item from the items to the editor.

With an Audio & Video item, you can play HTML5 compatible audio and video files and YouTube movies.

Depending on what type of audio or video you want to play, you have to select the correct type at Audio & Video > Type in the properties.

HTML5 Audio and HTML5 Video

Select the type HTML5 Audio for audio files and HTML5 Video for video files in the properties at Audio & Video > Type.

Compatible Audio Formats

Compatible Video Formats

Select the desired file at Audio & Video > Media File. Because not every audio and video format is compatible with all systems and browsers, you can embed the file in multiple formats. If you want to embed the file in more than one format, select the additional files at Audio & Video > Alternative Media File.

By default, controls with buttons like Play, Pause or Full Screen will appear. If you don't want that, you can disable Audio & Video > Show controller in the properties.

You can select a poster picture for videos. This picture will appear as a placeholder until the video will be played. You can select an image in the properties at Audio & Video > Poster Picture before Playback. We suggest you to select a still, taken from the video.

By default, a large play button will be displayed on the poster picture. You can disable this in the properties or choose a custom artwork as the button picture.

YouTube

Select the type YouTube in the properties at Audio & Video > Type if you want to show a YouTube video on the page.

Look in YouTube for the desired video and paste the URL from the browser address bar in the field at Audio & Video > Video ID. Fter that, Goldfish will download a preview image and will resize the Audio & Video item.

The field Audio & Video > ID will cut out the correct ID automatically. Just paste the URL, the video ID or the embedding HTML code of a YouTube movie.

By default, the YouTube player will be displayed with title and controls. But you can change that in the properties at Audio & Video.

Properties for Audio & Video Items

These properties can be set for an audio & video item. Select an audio & video item to see its properties.

Item > Identifier (Id)Specifies the name of the item in order to address it in animations or as a link target. Use only letters and numbers for the name, no spaces or special characters.
Item > LeftSets the distance in pixels from the left side of the item to the area where the item is located.
Item > TopSets the distance in pixels from the top side of the item to the area where the item is located.
Item > WidthSets the width of the item in pixels.
Item > HeightSets the height of the item in pixels.
Item > Padding LeftSets the distance from the left side of the item to the content in pixels.
Item > Padding RightSets the distance from the right side of the item to the content in pixels.
Item > Padding TopSets the distance from the top side of the item to the content in pixels.
Item > Padding BottomSets the distance from the bottom side of the item to the content in pixels.
Item > Background ColorSelect a background color for the item.
Item > Background Picture ClipSelect a background picture from the Fishbeam Clips library. This option is only available if you have the Fishbeam Clips library installed.
Item > Background PictureSelect a background picture for the item. With Repeat, you can choose how the picture will be displayed. On Retina websites the background picture will be displayed with double resolution, but half the size (except SVG images).
Item > RepeatRepeats the background picture.
  • Don't Repeat displays the picture only once.
  • Repeat tiles the picture over the entire space.
  • Repeat Horizontally tiles the image in a row.
  • Repeat Vertically tiles the image in a column.
  • Cut to Fill displays the image once over the entire space. Overlapping edges will be cropped.
Item > Position HorizontalSets the horizontal position of the background picture. If the picture will be repeated, it will be placed once on the specified position and the remaining space on the left, on the right, above and below will be filled.
Item > Position VerticalSets the vertical position of the background picture. If the picture will be repeated, it will be placed once on the specified position and the remaining space on the left, on the right, above and below will be filled.
Item > Fix relative to Browser windowThe position of the background picture is calculated on the basis of the browser window. The picture is pined to the window and will not move when scrolling. The picture can be hidden or only parts are visible if it is outside of the visible space.
Item > Border Left WidthDisplays a border on the left side of the item in the choosen width (pixels).
Item > Border Left ColorSelect a color for the left border.
Item > Border Right WidthDisplays a border on the right side of the item in the choosen width (pixels).
Item > Border Right ColorSelect a color for the right border.
Item > Border Top WidthDisplays a border on the top side of the item in the choosen width (pixels).
Item > Border Top ColorSelect a color for the top border.
Item > Border Bottom WidthDisplays a border on the bottom side of the item in the choosen width (pixels).
Item > Border Bottom ColorSelect a color for the bottom border.
Item > Opacity (%) Makes the item transparent. From 0% (fully transparent) to 100% (completely visible).
Item > RotationRotation of the object in a clockwise direction from 0° to 360°.
Item > Moving Mouse Over Animation Select an animation that you have previously created with an Animation item. The animation will be started as soon as the website visitor moves the mouse over the item.
Item > Moving Mouse Out Animation Select an animation that you have previously created with an Animation item. The animation will be started as soon as the website visitor moves the mouse from the item.
Audio & Video > TypeSelect the type, depending on what you want to play.
Audio & Video > Media FileSelect the media file from your computer, that you want to play (not available if you have selected YouTube at Audio & Video > Type).
Audio & Video > Alternative Media FileSelect an alternative media file from your computer, that is in a different format. The browser will automatically select the appropriate format (not available if you have selected YouTube at Audio & Video > Type).
Audio & Video > Video IDEnter the ID, the URL or the embed HTML code of a YouTube movie (only available if you have selected YouTube at Audio & Video > Type).
Audio & Video > Show controllerDisplays controls like play, stop, pause and full screen.
Audio & Video > Start playback automaticallyWill play the media file automatically when the page has been loaded.
Audio & Video > LoopingWill play the media file in a loop.
Audio & Video > Start & Stop with click in display areaA click in the area of the Audio & Video item will start the playback or will paused it. (not available if you have selected YouTube at Audio & Video > Type).
Audio & Video > Show suggestionsDisplays more movies as a suggestion after playing a YouTube movie.
Audio & Video > Show Video TitleDisplays the title in the player of YouTube movies.
Audio & Video > Play Audio TrackPlays the soundtrack of a video file.
Audio & Video > Poster Picture before PlaybackSelect an image that can be seen in the video before playback begins.
Audio & Video > Show play button on poster pictureShows a play button on the poster picture.
Audio & Video > Play Button PictureChoose a custom button picture if you don't like the standard play button.


Did this help page answer your questions?

If you need additional assistance regarding this topic or if there's missing some information in this chapter, please write us.