Youtube widget example

  • Created : Jan, 15, 2020
  • Last Updated: Aug, 15, 2022

Following YouTube widget examples show how to create, an RSS widget with a YouTube video widget as a card style.


Easy Steps

Widget Settings
  1. Create widget -> RSS
  2. Feed URL -> https://www.youtube.com/channel/UCkGCrPKcT3M04WH2QilLJWQ
  3. General -> Width -> Responsive/In Pixels -> Responsive
  4. General -> Style -> Thumbnail
  5. General -> Height -> Posts -> 1
  6. General -> Scroll -> ON
  7. General -> Scroll -> Horizontal
  8. General -> Scroll -> Navigation arrow -> ON
  9. General -> Scroll -> Autoscroll -> OFF
  10. General -> Advanced Settings -> Custom CSS link -> Show custom css
    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.
    
    
    /* Copy CSS from here  */
    
    #fw-feed-items .fw-feed-item-image {
      display: none;
    }
    
    .fw-feed-item,
    .fw-feed-item:hover {
      margin: 0;
      padding: 0;
    }
    
    .fw-feed-item-content-module {
      margin: 10px;
      padding: 10px;
      overflow: hidden;
    }
    
    header {
      background-image: url(http://co.mikle.com/test/images/mikle-logo.png);
      background-repeat: no-repeat;
      background-position: center right 13px;
      background-size: 70px auto;
    }
    
    .fw-feed-multimediaplayer {
      box-shadow: 0px 2px 5px #737373ba;
    }
    
    /* CSS Ends Here  */
    
  11. Feed Title -> Custom -> ON
  12. Feed Title -> Custom -> Main Title -> Feedwind Youtube Channel
  13. Feed Title -> Font size -> 16
  14. Feed Title -> Colors -> Background color -> #db0411
  15. Feed Title -> Colors -> Font color -> #FFFFFF
  16. Feed Content -> Size -> Item title -> 18
  17. Feed Content -> Size -> Bold -> OFF
  18. Feed Content -> Size -> Content -> 16
  19. Feed Content -> Colors -> Title font -> #4e4f4f
  20. Feed Content -> Colors -> Content font -> #505659
  21. Feed Content -> Colors -> Background -> #e0e0e0
  22. Feed Content -> Advanced Settings -> Podcast/YouTube -> ON
  23. Feed Content -> Advanced Settings -> Podcast/YouTube -> Display YoutTube player
  24. Rest keep as default

Check how to create YouTube for the website


Related posts

Enhancing User Engagement with YouTube Widgets on Your Website

Enhancing User Engagement with YouTube Widgets on Your Website

Contents1 The Purpose of YouTube Widgets2 Advantages of Embedding YouTube Widgets3 Benefits of Elevated Engagement4 Implementing YouTube Widgets A...

Sports-widget

Add a Dynamic Sports Widget to Your Website

Contents1 Increase User Engagement1.1 Increased Engagement1.2 Lower Bounce Rates1.3 Level Up User Experience2 How to Add FeedWind Sports Widget...

podcast guide banner

Facebook posts: Enhance your brand’s online presence with custom overlay design

Stand Out with Custom Overlay Designs While images play a vital role in catching the eye, the design elements...