Call: 02039165890 or WhatsApp
Embedding Music and Video on your Website
We explore some popular embed scripts and review the available parameters available...
We look at a selection of embed scripts to allow you to place video, audio and other content into your website... But importantly, the below examples are all responsive versions of embed scripts which are not always the 'default'. In addition to the hands, there are often customization parameters which can be used to edit various aspects of the player. Such as colours, widths, playback features such as 'Autoplay', API calls, background colours etc... Below, we look at some popular embed scripts and review some available parameters.
Embed Apple Music
<iframe style="width: 100%; max-width: 960px; overflow: hidden; background: transparent;" src="https://embed.music.apple.com/us/album/the-lion-king-original-motion-picture-soundtrack/1445732923?app=music" height="450" frameborder="0" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"></iframe> Embed YouTube
<iframe src="https://www.youtube.com/embed/1La4QzGeaaQ" width="860" height="415" frameborder="0" allowfullscreen=""></iframe>The main available parameters that can be tweaked in the URL are as follows... Many others relate to API calls, which I have not included in the list below. Please visit YouTube to view all the available parameters.
| autoplay | This parameter specifies whether the initial video will automatically start to play when the player loads. Supported values are 1 or 0. |
| cc_lang_pref | This parameter specifies the default language that the player will use to display captions. Set the parameter's value to an ISO 639-1 two-letter language code |
| cc_load_policy | Setting the parameter's value to 1 causes closed captions to be shown by default, even if the user has turned captions off. |
| colour | This parameter specifies the colour that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white. The colour should be written in American English! |
| controls | This parameter indicates whether the video player controls are displayed. 1 or 0. |
| end | This parameter specifies the time, measured seconds from the start of the video, when the player should stop playing the video. The parameter value is a positive integer. |
| loop | In the case of a single video player, a setting of 1 causes the player to play the initial video repeatedly. |
| modest branding | This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still show in the upper-right corner of a paused video when the user's mouse pointer hovers over the player. |
| rel | If the rel parameter is set to 0, related videos will come from the same channel as the video just played. But it is no longer possible to turn off related videos! |
Embed SoundCloud
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/256249403&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>SoundCloud parameters are listed below. Please note that SoundCloud Pro users have further control over the display and branding options...
| &color=FF4444 | Colour of the Play button and equalizer graphic |
| &auto_play=false | Disable autoplay |
| &show_artwork=true | Show the artist-graphic |
| &show_comments=true | Show fans comment under equalizer |
| &show_playcount=true | Number of times played |
| &hide_related=true | Do not force users to Soundcloud |
| &show_user=false | Hide uploaders name |
| &liking=fals e | Hide like button |
| &visual=true | Use artist-graphic for the background |
| &buying=false | Do not display a buy button |
| &sharing=false | Do not display a share button |
| &download=false | Do not display a download button |
| &start_track=4 | Start at a specific track (for lists) |
Embed Vimeo
<iframe src="https://player.vimeo.com/video/234040584" width="640" height="246" frameborder="0" allowfullscreen=""></iframe>Critical parameters for Vimeo... Please note that some features below are only suitable for Pro members, and if you are adding multiple parameters to the same embed code, you'll need to separate them with ampersands (&).
| autopause | 1 or 0 - The Vimeo player is designed to play only one Vimeo video at a time. Suitable for pages with more than one video on the same page! |
| autoplay | 1 or 0 - Automatically start playback of the video. |
| background | 1 or 0 - If one, this makes the video auto-play and loop if it was being used as a cover image on a website background |
| byline | 1 or 0 - Show the author of the video. |
| colour | (Hex Code) - Specify the colour of the video controls. (Pro Only) |
| controls | 1 or 0 - This parameter will hide all elements in the player (play bar, sharing buttons, etc.) for a chromeless experience. (Pro Only) |
| int | 1 or 0 - 'Do Not Track' will block the player from tracking session data, including all cookies and stats. |
| fun | 1 or 0 - When disabled, removes quirky error messages in the player (e.g. Oops, Fiddlesticks) etc. |
| loop | 1 or 0 - Play the video again when it reaches the end, infinitely. |
| muted | 1 or 0 - Set the video to soften on load. Viewers can still adjust the volume preferences in the player. |
| plays inline | Play video inline on mobile devices instead of automatically going into fullscreen mode when the play button is pressed. Inline playback is enabled for all videos by default. |
| portrait | 1 or 0 (default) - Show the author's profile image (picture) |
| quality | By default, the Vimeo player is set to "Auto" mode, which means it chooses the highest video quality possible, depending on the viewer's bandwidth and other factors in the playback environment. See the Vimeo website for more info. |
| speed | Show speed controls in the preference menu of the player and enable playback rate API. |
| #t (#t=1m2s) | Used to begin playback at a specific point in time automatically. 10 seconds would be: #t=10s, 3 mins, 15 seconds would be: #t=3m15s |
| title | Show the video's title. |
| transparent | 1 or 0 - By default, the background of the player iframe is transparent on Vimeo. |
Embed Spotify
<iframe src="https://open.spotify.com/embed/track/6TQKp91JtjezK8hmE7EVQE" width="100%" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>