Embed YouTube

“Composium – Visual Composer Extensions” makes it very easy to show a YouTube video on your site. You can show the video in a lightbox or embed it directly. You can trigger the lightbox from a variety of elements and if selected, the plugin will even attempt to retrieve the cover iamge for your video from YouTube directly.

[TS-VCSC-Icon-Title title=”Single YouTube Videos” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”c2luZ2xl”]

YouTube Thumbnail

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=Fprp5Cz2BXI” content_lightbox=”true” content_youtube_trigger=”preview” content_youtube_title=”This is a Youtube Video” content_tooltip_content=”Click on the icon to view the Youtube video.” height=”10″ content_tooltip_css=”true”]

Default Thumbnail

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=fqnWTbsHQJE” content_lightbox=”true” content_youtube_title=”This is a Youtube Video” content_tooltip_content=”Click on the icon to view the Youtube video.” height=”10″ content_tooltip_css=”true”]

Custom Image

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=csltI1qcgEw” content_lightbox=”true” content_youtube_trigger=”image” content_youtube_image=”18854″ content_youtube_title=”This is a Youtube Video” content_tooltip_content=”Click on the icon to view the Youtube video.” height=”10″ content_tooltip_css=”true”]
[TS-VCSC-Spacer height=”20″]

Font Icon

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=ks2mkRbl1MU” content_lightbox=”true” content_youtube_trigger=”icon” content_youtube_icon=”ts-awesome-youtube-square” content_youtube_iconsize=”120″ content_youtube_iconcolor=”#cc0000″ content_tooltip_content=”Click on the icon to view the Youtube video.” content_tooltip_css=”true”]

Text

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=I7LKwSvU-jA” content_lightbox=”true” content_youtube_trigger=”text” content_youtube_text=”View Video” content_tooltip_content=”Click on the icon to view the Youtube video.” content_tooltip_css=”true”][TS-VCSC-Spacer height=”20″]

Custom Markup

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=XdtUHUn3g_0″ content_lightbox=”true” content_youtube_trigger=”custom” content_raw=”JTNDYnV0dG9uJTIwY2xhc3MlM0QlMjJidXR0b24lMjIlMjBzdHlsZSUzRCUyMmNvbG9yJTNBJTIwJTIzMDAwMDAwJTNCJTIyJTNFVmlldyUyMFZpZGVvJTNDJTJGYnV0dG9uJTNF” content_tooltip_content=”Click on the button to view the Youtube video.” content_tooltip_css=”true”]

Buttons

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=ZNXwl5qQ2u4″ content_lightbox=”true” content_youtube_trigger=”winged” content_youtube_title=”This is a Youtube Video” content_youtube_subtitle=”Click to view the video” content_tooltip_content=”Click on the icon to view the Youtube video.” content_tooltip_css=”true”][TS-VCSC-Spacer height=”20″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=QT_oTgLP1dE” content_lightbox=”true” content_youtube_trigger=”simple” content_tooltip_content=”Click on the icon to view the Youtube video.” content_tooltip_css=”true”][TS-VCSC-Spacer height=”20″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=QT_oTgLP1dE” content_lightbox=”true” content_youtube_trigger=”flaticon” content_youtube_icon=”ts-awesome-youtube-square” content_youtube_buttonstyle=”ts-dual-buttons-color-alizarin-flat” content_youtube_buttonhover=”ts-dual-buttons-preview-pomegranate-flat ts-dual-buttons-hover-pomegranate-flat” content_youtube_title=”This is a Youtube Video” content_tooltip_content=”Click on the icon to view the Youtube video.” content_tooltip_css=”true”][TS-VCSC-Spacer height=”20″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=QT_oTgLP1dE” content_lightbox=”true” content_youtube_trigger=”flat” content_youtube_buttonstyle=”ts-dual-buttons-color-orange-flat” content_youtube_buttonhover=”ts-dual-buttons-preview-carrot-flat ts-dual-buttons-hover-carrot-flat” content_youtube_title=”This is a Youtube Video” content_tooltip_content=”Click on the icon to view the Youtube video.” content_tooltip_css=”true”]

iFrame

[TS-VCSC-Divider margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=Lr-gs8UbtI0″ height=”10″ content_tooltip_css=”true”]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”YouTube Direct Embed with Cover” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”ZGlyZWN0JTJDJTIwY292ZXI=”][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle” font_title_family=”Default:regular” font_content_family=”Default:regular”]

The following videos are directly embedded into the site via iFrame, but have an image overlay placed on top of it. The overlay will automatically be removed when clicking on or hovering over it. Optionally, a short text string can be added as well. Can be used for single video and playlist iFrame embeds alike.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

Click Trigger

[TS-VCSC-Divider seperator_4=”Other Settings” margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=csltI1qcgEw” content_overlay_use=”true” video_infobar=”false” video_modest=”true” lightbox_play=”true” content_overlay_image=”20067″ content_overlay_quality=”large” content_overlay_text=”SGFtYnVyZyUyMGluJTIwTW90aW9u” el_file=”” height=”10″ content_tooltip_css=”true”]

Hover Trigger

[TS-VCSC-Divider seperator_4=”Other Settings” margin_top=”0″][TS-VCSC-Youtube content_youtube=”https://www.youtube.com/watch?v=csltI1qcgEw” content_overlay_use=”true” video_infobar=”false” video_modest=”true” lightbox_play=”true” content_overlay_image=”20068″ content_overlay_quality=”large” content_overlay_trigger=”hover” content_overlay_text=”SGFtYnVyZyUyMGluJTIwTW90aW9u” el_file=”” height=”10″ content_tooltip_css=”true”]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”YouTube Playlists” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”UGxheWxpc3Rz”]

Predefined Playlist via ID

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle” seperator_6=””]

The following playlist has been created on YouTube and is embedded simply by using the playlist ID as assigned by YouTube.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Youtube content_type=”playlist” content_playlist=”http://www.youtube.com/playlist?list=PL2wGH1HeGNkUh78sWuByLgRcd79X-moC-“]
[TS-VCSC-Youtube content_type=”playlist” content_playlist=”http://www.youtube.com/playlist?list=PL2wGH1HeGNkUh78sWuByLgRcd79X-moC-” content_lightbox=”true” content_youtube_trigger=”image” content_youtube_image=”18850″]
[TS-VCSC-Spacer height=”20″]

Dynamic Playlist via Search Term(s)

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

The following playlist is generated automatically by YouTube, using the search terms “Timelapse, Berlin”. Search playlists are limited by YouTube to 20 videos.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Youtube content_type=”searchterm” content_search=”Timelapse, Berlin”]
[TS-VCSC-Youtube content_type=”searchterm” content_search=”Timelapse, Berlin” content_lightbox=”true” content_youtube_trigger=”image” content_youtube_image=”18850″]
[TS-VCSC-Spacer height=”20″]

Manual Playlist via Video ID’s

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

The following playlist is generated automatically through YouTube, by manually providing the ID’s of up to 20 YouTube Videos, separated by comma.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Youtube content_type=”combination” content_combination=”OiXctCR1YFA,l5sOpO4kz9s,MnvRa3pvn-k”]
[TS-VCSC-Youtube content_type=”combination” content_combination=”OiXctCR1YFA,l5sOpO4kz9s,MnvRa3pvn-k” content_lightbox=”true” content_youtube_trigger=”image” content_youtube_image=”18857″]
[TS-VCSC-Spacer height=”20″]

Playlist via User Uploads

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

The following playlist is generated automatically through YouTube, by using the last 100 videos uploaded by a specific user, identified by user ID.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″]

[TS-VCSC-Youtube content_type=”uploads” content_uploads=”photohod”]
[TS-VCSC-Youtube content_type=”uploads” content_uploads=”photohod” content_lightbox=”true” content_youtube_trigger=”image” content_youtube_image=”18854″]
[TS-VCSC-Spacer height=”20″]