YOUTUBE VIDEOS & PLAYLISTS

EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE

“Composium – WP Bakery Page Builder Extensions” makes it easy for you to embed a YouTube video on your page. You can show the video in a lightbox or embed it directly. There are also a variety of triggers available to call the lightbox.

YouTube Video Features:

Embed video or playlist directly into page via iframe or show in lightbox
Directly embedded video can have an image overlay (video will only be loaded after click or hover event to remove overlay)
Includes multiple trigger options for lightbox (image, buttons, icons, text only, custom code)
Player is provided and controlled by YouTube
Option to autoplay video
Set video start and end time (single video only)
Show/hide related videos at the end
Show/hide top video information bar
Use YouTube modest branding for player
Add tooltip to direct video or lightbox trigger

Export Page Content

[vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578144051118{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">YOUTUBE VIDEOS & PLAYLISTS</h1>
<h3 style="text-align: center;">EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="20" padding_bottom="20" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479749654924{margin-bottom: 0px !important;}"][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_column_text]
<p style="text-align: justify;">"Composium - WP Bakery Page Builder Extensions" makes it easy for you to embed a YouTube video on your page. You can show the video in a lightbox or embed it directly. There are also a variety of triggers available to call the lightbox.</p>
[/vc_column_text][TS-VCSC-Spacer height="20"][vc_column_text]
<h2>YouTube Video Features:</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][TS_VCSC_Fancy_List list_type="image" marker_image="https://www.composium.krautcoding.com/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png"]
<ul>
 	<li style="text-align: justify;">Embed video or playlist directly into page via iframe or show in lightbox</li>
 	<li style="text-align: justify;">Directly embedded video can have an image overlay (video will only be loaded after click or hover event to remove overlay)</li>
 	<li style="text-align: justify;">Includes multiple trigger options for lightbox (image, buttons, icons, text only, custom code)</li>
 	<li style="text-align: justify;">Player is provided and controlled by YouTube</li>
 	<li style="text-align: justify;">Option to autoplay video</li>
 	<li style="text-align: justify;">Set video start and end time (single video only)</li>
 	<li style="text-align: justify;">Show/hide related videos at the end</li>
 	<li style="text-align: justify;">Show/hide top video information bar</li>
 	<li style="text-align: justify;">Use YouTube modest branding for player</li>
 	<li style="text-align: justify;">Add tooltip to direct video or lightbox trigger</li>
</ul>
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height="20"][TS_VCSC_Content_Export toggle_switch="true" toggle_background="#fe6e6e" clipboard="true"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_single_image image="22337" img_size="large" alignment="center" css_animation="fadeInRight"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578144103280{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">SINGLE YOUTUBE VIDEOS</h1>
<h3 style="text-align: center;">EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" parallax_speed="0.1" css=".vc_custom_1444100808303{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_row_inner][vc_column_inner width="1/3"][TS-VCSC-Youtube content_youtube="https://www.youtube.com/watch?v=csltI1qcgEw" height="10" content_tooltip_css="true"][/vc_column_inner][vc_column_inner width="1/3"][TS-VCSC-Youtube content_youtube="https://www.youtube.com/watch?v=Fprp5Cz2BXI" content_lightbox="true" content_youtube_trigger="image" content_youtube_image="21685" content_youtube_title="This is a Youtube Video" overlay_background="rgba(24,24,24,0.3)" overlay_title_back="rgba(0,0,0,0.4)" content_tooltip_content="Click on the icon to view the Youtube video." height="10" content_tooltip_css="true"][/vc_column_inner][vc_column_inner width="1/3"][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="fa fa-youtube" 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"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578144112926{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">DIRECT EMBED WITH COVER</h1>
<h3 style="text-align: center;">EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row][vc_column seperator_1="Viewport Animation"][TS-VCSC-Spacer height="40"][TS_VCSC_Info_Notice panel_layout="notice" panel_type="info" panel_icon="fa fa-info-circle" font_title_family="Default:regular" font_content_family="Default:regular"]
<p style="text-align: justify;">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.</p>
[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height="20"][vc_row_inner seperator_12=""][vc_column_inner width="1/2"][vc_column_text]
<h2 style="text-align: center;">Click Trigger</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][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="23483" content_overlay_quality="large" content_overlay_text="SGFtYnVyZyUyMGluJTIwTW90aW9u" el_file="" height="10" content_tooltip_css="true"][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text]
<h2 style="text-align: center;">Hover Trigger</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][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="23484" content_overlay_quality="large" content_overlay_trigger="hover" content_overlay_text="SGFtYnVyZyUyMGluJTIwTW90aW9u" el_file="" height="10" content_tooltip_css="true"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578144121531{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">YOUTUBE PLAYLISTS</h1>
<h3 style="text-align: center;">EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" parallax_speed="0.1" css=".vc_custom_1444101717936{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_column_text]
<h2 style="text-align: center;">Predefined Playlist via ID</h2>
[/vc_column_text][TS_VCSC_Info_Notice panel_layout="notice" panel_type="info" panel_icon="fa fa-info-circle" font_title_family="Default:regular" font_content_family="Default:regular"]
<p style="text-align: justify;">The following playlist has been created on YouTube and is embedded simply by using the playlist ID as assigned by YouTube.</p>
[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height="20"][vc_row_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="playlist" content_playlist="http://www.youtube.com/playlist?list=PL2wGH1HeGNkUh78sWuByLgRcd79X-moC-"][/vc_column_inner][vc_column_inner width="1/2"][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="23488" overlay_background="rgba(24,24,24,0.3)" overlay_title_back="rgba(0,0,0,0.4)"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" parallax_speed="0.1" css=".vc_custom_1444100768032{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_column_text]
<h2 style="text-align: center;">Dynamic Playlist via Search Term(s)</h2>
[/vc_column_text][TS_VCSC_Info_Notice panel_layout="notice" panel_type="info" panel_icon="fa fa-info-circle" font_title_family="Default:regular" font_content_family="Default:regular"]
<p style="text-align: justify;">The following playlist is generated automatically by YouTube, using the search terms "Timelapse, Berlin". Search playlists are limited by YouTube to 20 videos.</p>
[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height="20"][vc_row_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="searchterm" content_search="Timelapse, Berlin"][/vc_column_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="searchterm" content_search="Timelapse, Berlin" content_lightbox="true" content_youtube_trigger="image" content_youtube_image="23488" overlay_background="rgba(24,24,24,0.3)" overlay_title_back="rgba(0,0,0,0.4)"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" parallax_speed="0.1" css=".vc_custom_1444101732633{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_column_text]
<h2 style="text-align: center;">Manual Playlist via Video ID's</h2>
[/vc_column_text][TS_VCSC_Info_Notice panel_layout="notice" panel_type="info" panel_icon="fa fa-info-circle" font_title_family="Default:regular" font_content_family="Default:regular"]
<p style="text-align: justify;">The following playlist is generated automatically through YouTube, by manually providing the ID's of up to 20 YouTube Videos, separated by comma.</p>
[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height="20"][vc_row_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="combination" content_combination="OiXctCR1YFA,l5sOpO4kz9s,MnvRa3pvn-k"][/vc_column_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="combination" content_combination="OiXctCR1YFA,l5sOpO4kz9s,MnvRa3pvn-k" content_lightbox="true" content_youtube_trigger="image" content_youtube_image="23489" overlay_background="rgba(24,24,24,0.3)" overlay_title_back="rgba(0,0,0,0.4)"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" parallax_speed="0.1" css=".vc_custom_1444100755410{margin-bottom: 0px !important;}"][vc_column][TS-VCSC-Spacer height="40"][vc_column_text]
<h2 style="text-align: center;">Playlist via User Uploads</h2>
[/vc_column_text][TS_VCSC_Info_Notice panel_layout="notice" panel_type="info" panel_icon="fa fa-info-circle" font_title_family="Default:regular" font_content_family="Default:regular"]
<p style="text-align: justify;">The following playlist is generated automatically through YouTube, by using the last 100 videos uploaded by a specific user, identified by user ID.</p>
[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height="20"][vc_row_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="uploads" content_uploads="photohod"][/vc_column_inner][vc_column_inner width="1/2"][TS-VCSC-Youtube content_type="uploads" content_uploads="photohod" content_lightbox="true" content_youtube_trigger="image" content_youtube_image="23490" overlay_background="rgba(24,24,24,0.3)" overlay_title_back="rgba(0,0,0,0.4)"][/vc_column_inner][/vc_row_inner][TS-VCSC-Spacer height="40"][/vc_column][/vc_row]

Copy

SINGLE YOUTUBE VIDEOS

EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE

DIRECT EMBED WITH COVER

EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE

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.

Click Trigger

Hamburg in Motion

Hover Trigger

Hamburg in Motion

YOUTUBE PLAYLISTS

EASILY EMBED VIDEOS & PLAYLISTS FROM YOUTUBE

Predefined Playlist via ID

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

Dynamic Playlist via Search Term(s)

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

Manual Playlist via Video ID’s

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

Playlist via User Uploads

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