# Youtube video ### About YouTube Video Element [YouTube Video Element](https://help.pagefly.io/manual/youtube-element/) is designed to enhance the appeal of your webpage, aiming to boost your conversion rates. It allows you to effortlessly integrate videos from YouTube onto your website or blog. This element is particularly useful when you want to engage your audience with visual content, as videos are known to captivate attention and convey information in a more dynamic and engaging manner than text alone. You can check more details in the video tutorial below: {% embed url="" %} ### How To Access YouTube Video Element In PageFly pages, follow these steps to access the YouTube Video element feature: * Step 1: Click on the Elements function * Step 2: Click on the **YouTube** video element in the **Media** section * Step 3: Drag and drop the element you want into the page editor and then start using it. ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-740e98a9240371fc5079b00354676c72624637bc%2FAD_4nXc1k_20CZpp_9lbQWFnb2Z0VYGBaj8DHYERvKRm9CmkJ7SwHpkHyFgllKUgYTP3KQzGkvg7NZ8zQM8D2XKWzj9cS0gbjuXhbicOBMG3ZBYObVXH5gLXTsioBRe821PcQRYD8brTVb69tVyvg88fkey09zZH1lsuyhAVQu3MYTFJQ.gif?alt=media) ### How To Configure For YouTube Video Element The YouTube Video element comes with plenty of different parameters allowing you to fine-tune content appearance reaching the best possible conversion rate. Select the YouTube Video element and navigate to the General and Styling tab to see its parameters. When working with the page editor in PageFly, here are the key parameters for the YouTube video element: #### General Configuration | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **YouTube video URL**: The full URL of your YouTube video |

PageFly Youtube video

Display ratio: Select the video ratio display 4:3 or 16:9

PageFly Youtube video

| | **Video Size**: Set the size for your video with 2 options: Full Width-100% Video Size or Custom size | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8719dc6a7db50ee5f883f973e6b4f918222b93f8%2FAD_4nXcMmTTljWguxx6m3FKTXPsJ_CEBtCVmwJ6ZdHZ4UVtpHoNr0x_7_fZ6HwKEHFKAMjgZTpwcajwJojOj8gpK6_ciEZ0t5Y_jByQy1IcwS__1Jtuh_956XrHAY-lrAr7bZCATsffhcomttyqctO7N5Akey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | | **Video Width**: Change video width ( it means that you are applying Custom size module when you edit this section) | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8908d79451a0521ed4580c11f45f9a63b85fff7b%2FAD_4nXedwlRFRKgcW61sTofn9rzY6IWo1GdNZLwtY4ffrqA0Em5g2hUxNVEo3PMcAN3_gB7hAUHCYENl9B-JeAYCsR1Nn6VPQJvFwAVIoouqIeD3lCXrqhL4Dc7ItDDzVd4RxlEAA7ZUTv3300zBhQsQZQkey09zZH1lsuyhAVQu3MYTFJQ.gif?alt=media) | | **Show Controls**: Show or Hide video player control. | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-938dbb14a44b97fee74fd4192a9076a1a79d83d1%2FAD_4nXfiNnJ35p4FTQFiSYFKwOVFov1Uu0GfYYJ-bqe8HYgqNo0gbNIT1HRwDL5YrEnz-e7019q2ArmDjW0cGHlbBzR6Hx9jN5M7PT_Qveq9gnnl91N6gEDteMvl4AzhuTIPOoW6WNm9dnREqqayp63YBwkey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | | **Enable Loop**: Video plays constantly non-stop in a loop. | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-0c2b657b4aa9dcd497c2783c79b76e29bc074a49%2FAD_4nXeP9ZOHI8RqZeU2ZQFccC7hsIIoe7YlVk2G2eLd-1u-mGNdPlFN56rUjfXUd3od4XSLW6tabfaMo6jmd20yPTd1DQr6ZZrH4uSIZE-H88u5RiP02Nvnx62FbiCKC9QeAwAjVR_N8yA5V_rmlPnc3wkey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | |

Enable Autoplay: Turn on / off the autoplay feature. Please keep in mind that the autoplay function might not work in case:
- If the user configured his browser to prevent that action or parameter “Mute Video” from being turned off.
- If the users use the iPhone with Low Power Mode and access your website by Safari browser, the Enable Autoplay feature will be not activated.

| ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-3af1c7f0e5f0ab987f670b9f6348b5bc8e3341f0%2FAD_4nXeR1zy1J0Cm-qIZviNNE0JBgpS_k5mRh3cw3pZ8VZ9q1rkr_llVMXJ9YSy83Q1efHh-8mIIWbScBzRbc4Nch7SvN-bV4M4WLhc0MuLif1TXwpn0hd3OLnGEGQQEMZSbYplKmppppuV_O6TgjF9NSQkey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | | **Mute Video**: Turn on / off the video’s sound. | ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-deaef1ae96c79ea2a3f1d7982d055732d3d9c830%2FAD_4nXdb7-TxeDAqjmZE1rNyMtgrZZamd8NVpZfjkdl2f5t3JdqHhZoDfTQu5rj1_m85rMzTN8fHeKl9pT3m1YT7fok6zTPNLIp_rAsP7dmn2Do-yjvqm34wSoBriHy1XTEoWYtP_lrATONCqBk3aWokey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | |

Content loading: Choose the loading type for videos in the live preview. There are 2 options:
- Lazy loading: Videos load only when they enter the user's viewport, reducing initial page load time and conserving bandwidth.
- Standard: Videos load immediately, which may provide a smoother experience for users with fast internet connections.

| ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-edca60bf2ef032d25f8910aeb3e5ea8455d0b51c%2FAD_4nXfHrZiHOqQQwGN7U4expyFgI8o3JZJ_oGDtEeJvPGFbhd5jjJijg4LZo6hDdmPqpV0DcA8AEm9b6Kd8qbCIyBCJRGMyaVKfAHblWwh8uUDf1utu1hkxEZ0WcKV6R4mrJcmzRGRzB3px6elE6rcNfgkey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | |

Custom Start And End Time
- Start at: Customize your YouTube video start time.
- End at: Customize your YouTube video end time.

| ![](https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fgit-blob-8297478ef65ac0d8a24709eacb0398cf0b49f662%2FAD_4nXdNtFQBSIg0p_K2XBcu8nu40wRw0d2_Ep7_NGM5XVWRIcALgxooq-op6WlQ2afkzTXtyJQgGmdp6TMhrl7203uSkBicMlij3CCCU53cTnAukUtQViKQAD07jCD8kABjOWOIjr7s9KDdeYo5ITwW9gkey09zZH1lsuyhAVQu3MYTFJQ.png?alt=media) | You can get further information about Attributes, Visibility, Animation parameters [here](https://help.pagefly.io/manual/elements-general-settings/). #### Styling Configuration In the Styling tab, you can customize the appearance of the YouTube video element with parameters like Content color, Spacing, Background, Typography, etc. For further details on the Styling tab, please refer to this [link](https://help.pagefly.io/manual/elements-style-settings/). ### Common Cases * Avoid utilizing the HTML Video element or embedding YouTube code directly, as it may compromise responsiveness on mobile and tablet devices. Embedded code often imposes fixed width dimensions, leading to layout distortions on various screen sizes. * Additionally, note that AutoPlay functionality is contingent upon enabling the Mute feature, as per YouTube's updated API. However, AutoPlay won't function on tablet or mobile devices due to default restrictions imposed by mobile operating systems. ### Frequently Asked Questions **1. What is the YouTube element?** YouTube Video Element is a simple solution for integrating YouTube videos into your Shopify Store. Simply use the video's URL, and from there, you can customize and style your YouTube Video Section according to your preferences! **2. Difference between HTML video and YouTube element?** The HTML Video element allows you to upload videos directly to your Shopify store and use them on your PageFly pages. The YouTube Video element allows you to embed videos that have been published on YouTube on your PageFly pages. ### Additional Resources * [YouTube and HTML videos do not autoplay](https://help.pagefly.io/manual/youtube-html-videos-do-not-autoplay-issue/) * [How to Use VideoWise – Shoppable Videos Element with PageFly](https://help.pagefly.io/manual/videowise-shoppable-videos-element/) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/page-structure-and-elements/pagefly-elements/media/youtube-element.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.