{"id":7170,"date":"2024-04-14T16:53:45","date_gmt":"2024-04-14T08:53:45","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7170"},"modified":"2024-04-14T16:53:45","modified_gmt":"2024-04-14T08:53:45","slug":"clip","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/clip\/","title":{"rendered":"Clip"},"content":{"rendered":"\n<div class=\"documents_rich-text w-richtext\">\n<p id=\"\">The clip element enables you to integrate a video, hosted on a third-party platform like YouTube or Vimeo, anywhere on your website.<\/p>\n<p id=\"\">During this session, you&#8217;ll be educated on:<\/p>\n<ol id=\"\">\n<li id=\"\">The procedure for adding a video<\/li>\n<li id=\"\">How to adjust video configurations<\/li>\n<li id=\"\">Establishing video proportions<\/li>\n<li id=\"\">Alternative methods to include clips on your website<\/li>\n<li id=\"\">Incorporating videos using personalized code<\/li>\n<\/ol>\n<h2 id=\"\">Integrating a Clip<\/h2>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" alt=\"Thumbnail of Clip icon\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded206e_633c71ec29fb38a9b6f4e285_1wlmdlewmuttkwf49wzs5pts2zaxfirimprseuysfcqasxadwd8lfup6vhvsa85hk5oxli0je9utc-n2klvejtjwzomv_gekbwgxtv3mkor2ghq62zzzatkwuqjsojdxzptx9nyd6eq94ynpe25tlu.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b948a998510a9d2ded206e_633c71ec29fb38a9b6f4e285_1wlmdlewmuttkwf49wzs5pts2zaxfirimprseuysfcqasxadwd8lfup6vhvsa85hk5oxli0je9utc-n2klvejtjwzomv_gekbwgxtv3mkor2ghq62zzzatkwuqjsojdxzptx9nyd6eq94ynpe25tlu\"><\/div>\n<\/figure>\n<p id=\"\">There are two methods to insert a clip element into your website:<\/p>\n<ul id=\"\">\n<li id=\"\">Unveil the <strong id=\"\">Insert panel<\/strong> and drag a <strong id=\"\">video<\/strong> element onto your Webflow canvas<\/li>\n<li id=\"\">Key in <strong id=\"\">Command<\/strong> + <strong id=\"\">E<\/strong> (on Mac) or <strong id=\"\">Control<\/strong> + <strong id=\"\">E<\/strong> (on Windows) to open the <strong id=\"\">Quick find<\/strong> and seek the <strong id=\"\">video<\/strong> component<\/li>\n<\/ul>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" alt=\"The four elements that are included in the Media section of the add panel are Image, Video (highlighted), youtube and lottie animation.\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded206b_633c71ecb5bb06d62f303644_wpcms1wv6nlar6w-zivsdqrsym7o3d8_gmatlueeknm8e7uyc6s7qe9mwqb4-dtozb86mc2x-nptzaex7_wg79gk54nf_fy-pc8c2pzlr_zoiquthnb-uly4wlw57ocitohz89jrjmstge7gtbcsev\"><\/div>\n<\/figure>\n<h2 id=\"\">Adapting Clip Configurations<\/h2>\n<p id=\"\">After locating a clip element on your canvas, you can modify the <strong id=\"\">Clip configurations<\/strong> to input a URL and heading. To swiftly access the Clip settings:<\/p>\n<ul id=\"\">\n<li id=\"\">Double-tap on the <strong id=\"\">clip<\/strong> element<\/li>\n<li id=\"\">Pick the <strong id=\"\">clip<\/strong> element and navigate to the <strong id=\"\">Element settings panel (D)<\/strong><\/li>\n<\/ul>\n<p id=\"\">Paste the video&#8217;s URL, include a title if desired, and press <strong id=\"\">Enter<\/strong>\/<strong id=\"\">Return<\/strong>. The preview image for your clip will exhibit within the clip element.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded2082_633c71ed141976e109987fff_zwl_7bzrytxetovwozt5emf6ybpzgthif_qo36nqifdaojwitg8f1x1k351gssb3twetad4ok1zycswq73xpbzklckaaowgwddvzerbpynkkehekgoqn01ghvf9obrcousoazvmqnmyaa4emqb4lia.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Video settings section in the Element settings panel.\" title=\"64b948a998510a9d2ded2082_633c71ed141976e109987fff_zwl_7bzrytxetovwozt5emf6ybpzgthif_qo36nqifdaojwitg8f1x1k351gssb3twetad4ok1zycswq73xpbzklckaaowgwddvzerbpynkkehekgoqn01ghvf9obrcousoazvmqnmyaa4emqb4lia\"><\/div>\n<\/figure>\n<h3 id=\"\">Supported Clip Origins<\/h3>\n<ul id=\"\">\n<li id=\"\"><strong id=\"\">YouTube<\/strong> (consider utilizing a YouTube video element for enhanced YouTube video control)<\/li>\n<li id=\"\"><strong id=\"\">Vimeo<\/strong><\/li>\n<li id=\"\"><strong id=\"\">DailyMotion<\/strong><\/li>\n<li id=\"\"><strong id=\"\">KickStarter<\/strong> (merely paste the main campaign URL and Webflow will fetch the primary campaign clip)<\/li>\n<li id=\"\"><strong id=\"\">TED<\/strong> (supports multiple languages)<\/li>\n<li id=\"\"><strong id=\"\">Wistia<\/strong><\/li>\n<li id=\"\"><strong id=\"\">Ustream<\/strong><\/li>\n<li id=\"\"><strong id=\"\">Livestream<\/strong><\/li>\n<li id=\"\"><strong id=\"\">Twitch<\/strong><\/li>\n<li id=\"\"><strong id=\"\">Tudou<\/strong><\/li>\n<li id=\"\"><strong id=\"\">Hulu<\/strong><\/li>\n<li id=\"\"><strong id=\"\">SproutVideo<\/strong><\/li>\n<\/ul>\n<p id=\"\">Notify us via our <a href=\"https:\/\/wishlist.webflow.com\/ideas\/new\" id=\"\">Wishlist<\/a> if your clip origin is unconventional, and we will strive to incorporate it!<\/p>\n<blockquote id=\"\"><p>\u200d<strong id=\"\">Crucial:<\/strong> Currently, submitting video files to the Asset panel for use in the clip element is unsupported. Nevertheless, you can upload videos as muted background clips.<\/p><\/blockquote>\n<h2 id=\"\">Configuring Clip Dimensions<\/h2>\n<p id=\"\">The clip element conformably mirrors the dimensions of its encompassing container (e.g., when placed within a div block, it inherits the entire width of that div block). If you desire to specify a distinct width and height for your clip, generate a unique div block. Drag a div block from the <strong id=\"\">Insert panel<\/strong> and set the div block&#8217;s width and height parameters. Upon associating your clip with this personalized div block, it will adhere to that size.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" alt=\"On the left, set a width of 640 px and a 360 px height. On the right, drag the clip into the div block to substitute the placeholder.\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded207b_633c71eca25dfcd2affaefbc_fit5y_skxgen_iaip9y_gzi2w308jtdogakowdnpfqusdce1v2u-q0pjuwffdmckvptggcw_l_i9lp0uwrvhtnurfvikkkhwm-nqw5qebekemhaew8yon632gvafe5w6q_wsd8bduioe4lzye2n-sx.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b948a998510a9d2ded207b_633c71eca25dfcd2affaefbc_fit5y_skxgen_iaip9y_gzi2w308jtdogakowdnpfqusdce1v2u-q0pjuwffdmckvptggcw_l_i9lp0uwrvhtnurfvikkkhwm-nqw5qebekemhaew8yon632gvafe5w6q_wsd8bduioe4lzye2n-sx\"><\/div>\n<\/figure>\n<h2 id=\"\">Additional Approaches for Integrating Clips on your Website<\/h2>\n<p id=\"\">You can also insert clips on your website using other components like:<\/p>\n<ul id=\"\">\n<li id=\"\">YouTube clip<\/li>\n<li id=\"\">Background clip<\/li>\n<li id=\"\">Lightbox<\/li>\n<li id=\"\">Rich text<\/li>\n<li id=\"\">Personalized code embed<\/li>\n<\/ul>\n<h3 id=\"\">YouTube Clip Element<\/h3>\n<p id=\"\">The <strong id=\"\">YouTube clip<\/strong> element enables you to nest a clip from a YouTube URL. This element provides all the presentation choices available in YouTube&#8217;s embed feature, such as displaying related videos from a channel, specifying a certain start time, revealing or concealing video controls, and more. Find out more about the YouTube clip element.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\">\n<figure><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded207e_633c71edb5bb06d22a30366e_7t_ppxs1rez80ksmypd6hfdj98gxhst1urerfkzuyhq_b7zznlio3u1stuvqrq0kybhivxcs2tg2gaqt7sf918n1omifkszlukz6cfv9ajl9uiyq4rrht0cdxt4cszl87hcmxnko01dpmgpnptpxep.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The YouTube settings section in the Element settings panel.\" title=\"64b948a998510a9d2ded207e_633c71edb5bb06d22a30366e_7t_ppxs1rez80ksmypd6hfdj98gxhst1urerfkzuyhq_b7zznlio3u1stuvqrq0kybhivxcs2tg2gaqt7sf918n1omifkszlukz6cfv9ajl9uiyq4rrht0cdxt4cszl87hcmxnko01dpmgpnptpxep\"><\/div>\n<\/figure>\n<h3 id=\"\">Motion video section<\/h3>\n<p id=\"\">The <strong id=\"\">motion video<\/strong> section allows you to incorporate moving visuals without sound. Unlike the video component that only accommodates YouTube and Vimeo URLs, the motion video section can handle any video file you upload. Additionally, the motion video section includes a built-in toggle for play\/pause functionality, enabling site visitors to control the video background. Gain more insights about the motion video feature.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded2076_633c71edb7c2aa4343460fb6_1dsmnvlkzp0aivyuybuetyqm7bnhvdnzftcks1e7eix7nedz3vy04okkcobl_-ujubmiium0ejd_xvqbvc7ip-0zmhhrdgvrve96t2kipr9k-t4vxmkdvsexvnv9bcwcmh2ag1epdo4e-nxszjlzf6.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Background video settings section of the Element settings panel.\" title=\"64b948a998510a9d2ded2076_633c71edb7c2aa4343460fb6_1dsmnvlkzp0aivyuybuetyqm7bnhvdnzftcks1e7eix7nedz3vy04okkcobl_-ujubmiium0ejd_xvqbvc7ip-0zmhhrdgvrve96t2kipr9k-t4vxmkdvsexvnv9bcwcmh2ag1epdo4e-nxszjlzf6\"><\/div>\n<\/figure>\n<h3 id=\"\">Popup modal video element<\/h3>\n<p id=\"\">The <strong id=\"\">popup modal video<\/strong> element allows site visitors to launch a video clip in a popup model. Similar to the video segment, the popup modal supports YouTube and Vimeo URLs. Dive deeper into the popup modal video element.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded2086_633c71edbbba7962ad6678bb_emjojtwdzjuwuzz6c4ryp-svmiprocccdpb_hpbb9yw6q8sxpe2g0bx20_sq4mfdcdthbxorlbmdudg9zojwm3gkfzphcemyn-9fjy2hmottlb-fid8rektrux_gdzg6fknudmf__64mjx0uu20foo.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"Lightbox settings with an example video URL in the Media field.\" title=\"64b948a998510a9d2ded2086_633c71edbbba7962ad6678bb_emjojtwdzjuwuzz6c4ryp-svmiprocccdpb_hpbb9yw6q8sxpe2g0bx20_sq4mfdcdthbxorlbmdudg9zojwm3gkfzphcemyn-9fjy2hmottlb-fid8rektrux_gdzg6fknudmf__64mjx0uu20foo\"><\/div>\n<\/figure>\n<h3 id=\"\">Text styling element and text field with rich content<\/h3>\n<p id=\"\">The text styling section enables you to insert video content as well. This becomes more potent when utilized to fetch data from a rich text field within a CMS Collection.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b948a998510a9d2ded2073_633c71ed23f96adcbd781238_w0ut0lcjhpdd1_w8bqrycnzffjmadogomlxuowlx-rgla33oruejvwzrs9us9r5kr6wnl1rmqzhbjufmeucbpu_acdwh2hkc8ttnsivfvb_tidnf81nkybwevec-awaflqlsykkeb67lyvwauhwchj.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Video element option is highlighted in the Rich text element menu.\" title=\"64b948a998510a9d2ded2073_633c71ed23f96adcbd781238_w0ut0lcjhpdd1_w8bqrycnzffjmadogomlxuowlx-rgla33oruejvwzrs9us9r5kr6wnl1rmqzhbjufmeucbpu_acdwh2hkc8ttnsivfvb_tidnf81nkybwevec-awaflqlsykkeb67lyvwauhwchj\"><\/div>\n<\/figure>\n<p id=\"\">Alternatively, a <strong id=\"\">video <\/strong>section could be employed to dynamically fetch data from a Collection\u2019s video component. Discover more about Collection video components.<\/p>\n<h2 id=\"\">Adding videos through custom code embedding<\/h2>\n<p id=\"\">You can also integrate HTML videos using the <strong id=\"\">embed feature<\/strong>:<\/p>\n<ol id=\"\">\n<li id=\"\">Access the <strong id=\"\">Add section<\/strong><\/li>\n<li id=\"\">Place an <strong id=\"\">embed<\/strong><strong id=\"\">feature<\/strong> on the workspace<\/li>\n<li id=\"\">Insert your <strong id=\"\">video code<\/strong> (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/video\" target=\"_blank\" id=\"\" rel=\"noopener\">Find out more about video elements in HTML<\/a>)<\/li>\n<li id=\"\">Select <strong id=\"\">Save &amp; close<\/strong><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the video element to embed videos hosted on third-party sites like YouTube or Vimeo.","protected":false},"author":2,"featured_media":7171,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-7170","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=7170"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7170\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/7171"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}