{"id":188149,"date":"2021-03-05T10:23:50","date_gmt":"2021-03-05T09:23:50","guid":{"rendered":"https:\/\/guide.jtl-software.com\/inserting-videos-with-the-onpage-composer\/"},"modified":"2023-06-15T11:53:37","modified_gmt":"2023-06-15T09:53:37","slug":"inserting-videos-with-the-onpage-composer","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/","title":{"rendered":"Inserting videos with the OnPage Composer"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column width=&#8221;1\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;order-md&#8220;: &#8220;1&#8220;, &#8220;col-lg&#8220;: &#8220;4&#8220;, &#8220;order-lg&#8220;: &#8220;12&#8220;}&#8221; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<div id=\"toc\">\n\t<div class=\"card border-0 bg-rysywhite mt-0 mt-lg-5 mb-5 w-100\" data-toc-element>\n\t\t<div class=\"d-none d-lg-flex flex-column\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shaftblue\">\n\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t<\/span>\n\t\t\t<span class=\"font-weight-bold text-shaftblue text-center h5 mt-3 mb-0\">Contents<\/span>\n\t\t<\/div>\n\t\t<div class=\"d-block d-lg-none\">\n\t\t\t<a class=\"text-decoration-none card-header-link collapsed\" data-toggle=\"collapse\" href=\"#collapse-toc\" aria-expanded=\"false\" aria-controls=\"collapse-toc\">\n\t\t\t\t<div class=\"card-header d-flex bg-white align-items-center\" role=\"tab\" id=\"heading-toc\">\n\t\t\t\t\t<span class=\"h4 mb-0 d-flex align-items-center\">\n\t\t\t\t\t\t<span class=\"fa-layers fa-fw fa-2x mr-2 text-shaftblue\">\n\t\t\t\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span>Contents<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 ml-auto fas fa-caret-down text-gray\"><\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div id=\"collapse-toc\" class=\"collapse show\" data-parent=\"#toc\" role=\"tabpanel\" aria-labelledby=\"heading-toc\">\n\t\t\t<div class=\"card-body p-4 table-of-content\">\n\t\t\t\t<ul data-toc-headings=\"h2, h3, h4\" data-toc class=\"list-shop\"><\/ul>\n\t\t\t<\/div>\n\t    <\/div>\n\t<\/div>\n<\/div>[\/vc_column][vc_column responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: &#8220;12&#8220;, &#8220;order-lg&#8220;: &#8220;1&#8220;}&#8221; width=&#8221;2\/3&#8243; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<h1 class=\"d-flex align-items-center hl-shop\" id=\"inserting-videos-with-the-onpage-composer\">Inserting videos with the OnPage Composer <span id='anchor-inserting-videos-with-the-onpage-composer' data-href='#inserting-videos-with-the-onpage-composer' class='far fa-link' data-anchor><\/span><\/h1><div class=\"custom-box\">\n\t<div class=\"d-flex align-items-center mb-4\">\n\t\t\t\t\t\t\t<span class=\"mr-3 fa-stack flex-shrink-0 fa-1x\">\n\t\t\t<span class=\"fas fa-circle fa-stack-2x text-shaftblue\"><\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 fas fa-clipboard-list text-white fa-stack-1x\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\n\t\t<h3 class=\"mb-0 \" id=\"your-task-initial-situation\">Your task\/initial situation <span id='anchor-your-task-initial-situation' data-href='#your-task-initial-situation' class='far fa-link' data-anchor><\/span><\/h3>\t<\/div>\n\t<div class=\"box-content\">\n\t\tYou would like to embed a video from YouTube or Vimeo on your page or display your own uploaded video.\t<\/div>\n<\/div>\n<h3 class=\"d-flex align-items-center hl-wawi\" id=\"notes-on-data-protection\">Notes on data protection <span id='anchor-notes-on-data-protection' data-href='#notes-on-data-protection' class='far fa-link' data-anchor><\/span><\/h3>\t<p>Please note that embedding YouTube videos may result in you having to explicitly refer to this in your data privacy notice. Therefore, please note the following points for your Data privacy notice:<\/p>\n<ul class=\"list-reset ml-3 list-icons list-custom-square list-shop\">\n\t<li >\n\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\tYouTube videos are embedded in your pages in \u201cExtended data privacy mode\u201d.\t<\/li><li >\n\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\tAccessing the pages leads to the establishment of a connection with YouTube and DoubleClick.\t<\/li><li >\n\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\tJust one click on the video can trigger further data processing operations over which the website operator no longer has any influence.\t<\/li><\/ul><h2 class=\"d-flex align-items-center hl-wawi\" id=\"inserting-a-video\">Inserting a video <span id='anchor-inserting-a-video' data-href='#inserting-a-video' class='far fa-link' data-anchor><\/span><\/h2><ol start=\"1\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tLog in to the back end of JTL-Shop and switch to the front end of JTL-Shop.<\/li><li >\n\tOpen the page you want to edit and click the OnPage Composer icon at the top left of the page to open the OnPage Composer for that page.<\/li><li >\n\tDrag the <span class=\"highlight\">Video<\/span> portlet to the desired position in the OnPage Composer. The <span class=\"highlight\">Edit Video<\/span> window opens.<\/li><\/ol>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/add-video-portlet-opc-jtl-shop-512-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/add-video-portlet-opc-jtl-shop-512-1-1024x736.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/add-video-portlet-opc-jtl-shop-512-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/add-video-portlet-opc-jtl-shop-512-1-1024x736.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/add-video-portlet-opc-jtl-shop-512-1-768x552.png 640w\" width=\"1024\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"736\" alt=\"Setting the layout for a video\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/add-video-portlet-opc-jtl-shop-512-1.png&quot;,&quot;w&quot;:1479,&quot;h&quot;:1063}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<ol start=\"4\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li class=\"media-single-line\">\n\tSet the settings in this tab as you need them.<\/li><\/ol>\t<p><strong>Name:<\/strong> Enter the title of the video here.<\/p>\n<hr  \/>\n\t<p><strong>CSS class:<\/strong> If you have defined your own CSS classes, you can specify them here.<\/p>\n<hr  \/>\n\t<p><strong>Width:<\/strong> Enter the desired width of the video here.<\/p>\n<hr  \/>\n\t<p><strong>Height:<\/strong> Enter the desired height of the video here.<\/p>\n<hr  \/>\n\t<p><strong>Embed video responsively:<\/strong> Here you can specify whether the size of the video should change with the size of the page. If you select <span class=\"highlight\">No<\/span> here, you can specify how large the video should be under <span class=\"highlight\">Height\/Width<\/span>. Please note that videos on small screens (e.g. smartphone in portrait format) may be larger than the screen if you do not embed the video in a responsive way.<\/p>\n<hr  \/>\n\t<p><strong>Platform:<\/strong> Indicate here on which platform the video was uploaded. Depending on the platform, the other options differ slightly. For local videos, you can only select a video that is already in the media folder on your server.<\/p>\n<hr  \/>\n\t<p><strong>Video ID \/ Video URL:<\/strong> Enter the ID of the video on YouTube\/Vimeo or the video URL here.<\/p>\n<hr  \/>\n\t<p><strong>Starts\/Ends at second (YouTube video only):<\/strong> Here you can set a time code at which the video should start or end. Enter the time in seconds, e.g. 120, to start a video after exactly 2 minutes.<\/p>\n<hr  \/>\n\t<p><strong>Show controls (YouTube only):<\/strong> Here you specify whether the controls for pausing and the time line for jumping back or ahead are to be shown when the video is played.<\/p>\n<hr  \/>\n\t<p><strong>Show similar videos (YouTube only):<\/strong> This option displays similar videos after the video ends.<\/p>\n<hr  \/>\n\t<p><strong>Colour (YouTube only):<\/strong> Specify the colour of the controls.<\/p>\n<hr  \/>\n\t<p><strong>Video IDs for playlists (YouTube only):<\/strong> If you want to play several videos in succession, enter the IDs of the videos here, separated by commas.<\/p>\n<hr  \/>\n\t<p><strong>Repeat video once it has finished (Vimeo only):<\/strong> Here you determine whether the video is to be played again after the end.<\/p>\n<hr  \/>\n\t<p><strong>Show image (Vimeo only):<\/strong> Here you specify whether the picture of the user who uploaded the video should be displayed.<\/p>\n<hr  \/>\n\t<p><strong>Show name (Vimeo only):<\/strong> Here you determine whether the title of the video should be displayed.<\/p>\n<hr  \/>\n\t<p><strong>Show channel information (Vimeo only):<\/strong> Here you determine whether the name of the channel that uploaded the video should be displayed.<\/p>\n<hr  \/>\n\t<p><strong>Video URL (local video only):<\/strong> Click <span class=\"highlight\">Click to upload<\/span> to select the desired video file.<\/p>\n<hr  \/>\n\t<p><strong>Repeat video once it has finished (local video only):<\/strong> Here you determine whether the video should be played again after the video has ended.<\/p>\n<hr  \/>\n\t<p><strong>Use Auto-Play (local video only): <\/strong>Here you can select whether the video is played automatically.<\/p>\n<hr  \/>\n\t<p><strong>Mute Video (local video only):<\/strong> Here you determine whether the video is played with or without sound.<\/p>\n<hr  \/>\n\t<p><strong>Show control elements (local video only):<\/strong> Here you determine whether the controls are to be displayed or hidden in the video.<\/p>\n<ol start=\"5\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tSave the video. Follow the further steps to preview and publish an edited page at<span style=\"color: #5cbcf6;\">&nbsp;<a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/editing-pages-with-the-onpage-composer\/\">Editing pages with the OnPage Composer<\/a><\/span>.<\/li><\/ol><h2 class=\"d-flex align-items-center hl-wawi\" id=\"layout-tab\">Layout tab <span id='anchor-layout-tab' data-href='#layout-tab' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/layout-video-portlet-opc-jtl-shop-512-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/layout-video-portlet-opc-jtl-shop-512-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/layout-video-portlet-opc-jtl-shop-512-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/layout-video-portlet-opc-jtl-shop-512-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/layout-video-portlet-opc-jtl-shop-512-1-768x689.png 640w\" width=\"781\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"701\" alt=\"Setting the layout for a video\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/layout-video-portlet-opc-jtl-shop-512-1.png&quot;,&quot;w&quot;:781,&quot;h&quot;:701}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Background colour:<\/strong> Here you can set a colour to be displayed in the background of the video. The colour is only visible if you set a padding (see below).<\/p>\n<hr  \/>\n\t<p><strong>Font colour:<\/strong> Here you set the colour of the font. This is used for the title of the video.<\/p>\n<hr  \/>\n\t<p><strong>Font size:<\/strong>&nbsp;Here you set the size of the font. Enter a CSS value, e.g&nbsp;<span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em, etc.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Border style\/Border colour:<\/strong> Here you can specify whether the video should have a border and what colour it should be.<\/p>\n<hr  \/>\n\t<p><strong>Border rounding:<\/strong>&nbsp;Here you can specify whether the border should be rounded. You can specify the distance from the corner at which the rounding will start. You must specify a border style before you can do this. Enter a CSS value, e.g&nbsp;<span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em, etc.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><strong>Custom class names:<\/strong> Enter here the class names to be appended to the class attribute of the portlet. The names you assign here can be, for example, CSS classes that are defined in the theme of the template. For more information, please see the <a href=\"https:\/\/jtl-devguide.readthedocs.io\/projects\/jtl-shop\/de\/latest\/shop_templates\/eigenes_theme.html\">developer documentation<\/a>.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><strong>Hide portlet:<\/strong> Select here whether the portlet should be hidden when viewed on certain end devices. XS stands for mobile phones, SM for tablets, MD for desktop computers and LG for large desktop computers.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Margin:<\/strong>&nbsp;Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge. The element is reduced\/moved accordingly.<\/p>\n<hr  \/>\n\t<p><strong>Border:<\/strong>&nbsp;Here you can set the size of the frame in pixels for each page.<\/p>\n<hr  \/>\n\t<p><strong>Padding:<\/strong>&nbsp;Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"animation-tab\">Animation tab <span id='anchor-animation-tab' data-href='#animation-tab' class='far fa-link' data-anchor><\/span><\/h2>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/animation-video-portlet-opc-jtl-shop-512-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/animation-video-portlet-opc-jtl-shop-512-1.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/animation-video-portlet-opc-jtl-shop-512-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/animation-video-portlet-opc-jtl-shop-512-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/animation-video-portlet-opc-jtl-shop-512-1-768x579.png 640w\" width=\"781\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"589\" alt=\"Setting an animation for a video\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/animation-video-portlet-opc-jtl-shop-512-1.png&quot;,&quot;w&quot;:781,&quot;h&quot;:589}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Animation type:<\/strong> Here you can define in which way your video should be animated.<\/p>\n<hr  \/>\n\t<p><strong>Duration:<\/strong> Here you can define how long the entire animation of the video should last.<\/p>\n<hr  \/>\n\t<p><strong>Delay:<\/strong>&nbsp;Here you can define how much time should elapse before the first animation starts and before the next begins.<\/p>\n<hr  \/>\n\t<p><strong>Distance (pixels):<\/strong>&nbsp;Here you can define the minimum distance between the upper edge of the corresponding element and the lower edge of the browser window that must be reached before the animation starts.<\/p>\n<hr  \/>\n\t<p><strong>Repetition:<\/strong>&nbsp;Here you define how often the animation is to be repeated in total.<\/p>\n<div class=\"mt-5 card\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shop\">\n\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t<span data-fa-transform=\"shrink-8\" class=\"fas fa-link fa-inverse\"><\/span>\n\t\t<\/span>\n\t\t\t<div class=\"card-body p-4\">\n\t\t<p class=\"d-flex align-items-center hl-wawi h4\">Your task\/initial situation<\/p>\n<ul class=\"list-reset list-icons list-custom-square list-shop\">\n\t\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-content-portlets\/\" title=\"Overview of content portlets\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tOverview of content portlets\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/\" title=\"Creating banners with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating banners with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-buttons-with-the-onpage-composer\/\" title=\"Creating buttons with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating buttons with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/\" title=\"Creating image sliders with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating image sliders with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-countdowns-with-the-onpage-composer\/\" title=\"Creating countdowns with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating countdowns with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-galleries-with-the-onpage-composer\/\" title=\"Creating galleries with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating galleries with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-headlines-with-the-onpage-composer\/\" title=\"Creating headlines with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating headlines with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-an-image-with-the-onpage-composer\/\" title=\"Inserting an image with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting an image with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-product-streams-with-the-onpage-composer\/\" title=\"Creating product streams with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating product streams with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-texts-with-the-onpage-composer\/\" title=\"Inserting texts with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting texts with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t<\/ul>\t<\/div>\n<\/div>[\/vc_column][\/vc_row]<\/div>","protected":false},"excerpt":{"rendered":"Contents Contents Inserting texts with the OnPage Composer Your task\/initial situation You would like to add a text block on <a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\">[...]<\/a>","protected":false},"author":2,"featured_media":0,"parent":188596,"menu_order":127,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"tags":[],"class_list":["post-188149","page","type-page","status-publish","hentry","pages_category-opc-content-portlets-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Inserting videos with the OnPage Composer &#8211; JTL-Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inserting videos with the OnPage Composer &#8211; JTL-Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-15T09:53:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\",\"name\":\"Inserting videos with the OnPage Composer &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2021-03-05T09:23:50+00:00\",\"dateModified\":\"2023-06-15T09:53:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"JTL-Shop\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OnPage Composer\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Inserting videos with the OnPage Composer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/\",\"name\":\"JTL-Guide\",\"description\":\"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inserting videos with the OnPage Composer &#8211; JTL-Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/","og_locale":"en_US","og_type":"article","og_title":"Inserting videos with the OnPage Composer &#8211; JTL-Guide","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/","og_site_name":"JTL-Guide","article_modified_time":"2023-06-15T09:53:37+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/","name":"Inserting videos with the OnPage Composer &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2021-03-05T09:23:50+00:00","dateModified":"2023-06-15T09:53:37+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"JTL-Shop","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/"},{"@type":"ListItem","position":2,"name":"OnPage Composer","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/"},{"@type":"ListItem","position":3,"name":"Inserting videos with the OnPage Composer"}]},{"@type":"WebSite","@id":"https:\/\/guide.jtl-software.com\/en\/#website","url":"https:\/\/guide.jtl-software.com\/en\/","name":"JTL-Guide","description":"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-en"}]}},"_links":{"self":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/comments?post=188149"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188149\/revisions"}],"predecessor-version":[{"id":193294,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188149\/revisions\/193294"}],"up":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188596"}],"wp:attachment":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/media?parent=188149"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=188149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}