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

Create widget -> RSS
Feed URL -> https://www.youtube.com/channel/UCkGCrPKcT3M04WH2QilLJWQ
General -> Width -> Responsive/In Pixels -> Responsive
General -> Style -> Thumbnail
General -> Height -> Posts -> 1
General -> Scroll -> ON
General -> Scroll -> Horizontal
General -> Scroll -> Navigation arrow -> ON
General -> Scroll -> Autoscroll -> OFF

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  */

Feed Title -> Custom -> ON
Feed Title -> Custom -> Main Title -> Feedwind Youtube Channel
Feed Title -> Font size -> 16
Feed Title -> Colors -> Background color -> #db0411
Feed Title -> Colors -> Font color -> #FFFFFF
Feed Content -> Size -> Item title -> 18
Feed Content -> Size -> Bold -> OFF
Feed Content -> Size -> Content -> 16
Feed Content -> Colors -> Title font -> #4e4f4f
Feed Content -> Colors -> Content font -> #505659
Feed Content -> Colors -> Background -> #e0e0e0
Feed Content -> Advanced Settings -> Podcast/YouTube -> ON
Feed Content -> Advanced Settings -> Podcast/YouTube -> Display YoutTube player