Want to add a forum like this one to your store? Install Champ Now

Welcome to Champ's live demo

Did you know that this isn't just a demo?
This is our live pre-sales Q&A and support forum. Take a look around and say "Hello".

0

New Feature: YouTube embeds

Aug 3, 2018 - 1:11 AM

https://getchamp.myshopify.com/community/champ/forums/7/topics/1807 Copy
  • We have a special feature ready for you! It's experimental but it should be a good one.

    You can now automatically convert all YouTube URLs to an embedded video.

    By default, this feature is NOT active. To activate this feature, go to Settings, scroll to YouTube embed, and activate it.

    Check this out:

    https://www.youtube.com/watch?v=GR2o6k8aPlI

    Documentation here: https://getchamp.net/guides/customizations/#embedding-youtube-videos

    This post was edited Aug 16, 2018 10:14PM
    1
  • Very nice.

    0
  • If I activate this feature I'll have a little youtube window appearing in my footer on the right side ;D

    I'll wait until its not a beta anymore but its a cool thing :)

    0
  • Hi @anonymous,

    Can you please contact me at support@getchamp.net so I can see what's happening with your site?

    Thanks

    0
  • That is because Champ attempts to embed any youtube link as a video, including any youtube links in social media buttons in header and footer. It also adds two line breaks, which separates the buttons. A quickfix in css:

    .yourheader .embed-responsive, .yourheader br, .yourfooter .embed-responsive, .yourfooter br {display: none;}

    But even with a patch like this, the youtube embed feature introduces console errors:

    Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.

    1
  • Hi Danny,

    Thanks for your post.

    I’ll take a look at it and refine our code and post an update on this thread once the fix is deployed.

    Update: The console error is a bug in Google Chrome itself. As such, this is impossible to fix on our end. It appears Google released a new version of Chrome that fixed it. Source: https://stackoverflow.com/questions/48714879/error-parsing-header-x-xss-protection-google-chrome

    I’ll take a look at limiting the scope of where the embeds are enabled to ensure it doesn’t “leak” to sidebar and header areas.

    Update #2: The app should now only turn YouTube URLs that's within a post (ie. scoped under the post section, not on any other parts of the page).

    Let me know if this issue crops up again.

    This post was edited Aug 16, 2018 07:33PM
    1
  • I realize this is an old post, but in our community section, posting a youtube URL doesn't embed the video, it just posts the URL. any idea why? these are the settings we're supposed to turn on, correct? https://monosnap.com/file/4ENWJKqcuSasl1peSb2QyatuPgkesJ

    0
  • Hi @michaelr

    I think it may be due to the JavaScript not loading properly. Shoot me an email at support@getchamp.net with your myshopify.com domain and let me have a look.

    0

    Need help? Contact me at support@getchamp.net or here. Brand new! Add your own signature at https://getchamp.myshopify.com/community/champ/preference
  • Finally, i find a good answer about this topic. Thanks everyone.
    Web:https://vancedapp.net/

    This post was edited Oct 26, 2023 03:54AM
    0
Quick reply

How to format posts

Champ uses Markdown for formatting text in posts. Certain markup tags (eg. H1) are forbidden to ensure that pages remain semantically compliant. Other tags are automatically sanitized to ensure all content is secure.

  • Emphasis, aka italics, with *asterisks* or _underscores_.
  • Strong emphasis, aka bold, with **asterisks** or __underscores__.
  • Combined emphasis with **asterisks and _underscores_**.
  • Strikethrough uses two tildes. ~~Scratch this.~~
  • Links are added automatically, but can be formatted like so: [My link](https://mylink.com)
For more information, take a look at the Markdown Cheatsheet.