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

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...

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...

YouTube for website

YouTube for website

Contents1 Step 1: Create a YouTube widget from the Feedwind dashboard2 Step 2: You can add your YouTube channel...

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now