youtube

29 nonso100

Open In Editor Publish Your Code

youtube

Recommended

21 July 2025

HTML TV Screen with YouTube Embed & Effects

21 April 2026

youtube unblocked

HTML

const FieldRenderer = skuid.component.FieldRenderer;

return new FieldRenderer({
    readModeStrategy: "virtual",
    read: function (fieldComponent) {
      let h = fieldComponent.h,
          context = fieldComponent.cpi.getContext(),
          { field, model, row, value } = context;

return h("iframe",
          {
            width: "480",
            height: "315",
            src: `https://www.youtube.com/embed/${encodeURI(value)}`,
            frameborder: "0",
            allowfullscreen: "allowfullscreen",
          }
        );
    },

editModeStrategy: "virtual",
    edit: function (fieldComponent) {
      let h = fieldComponent.h,
          context = fieldComponent.cpi.getContext(),
          { field, model, row, value } = context;

return h("input",
          {
            value: value,
            styles: {
                width: "100%",
                height: "32px",
                padding: "0 8px",
            },
            oninput(event) {
              model.updateRow(row,
                  { [field.id]: event.target.value },
                  { initiatorId: fieldComponent.id }
              );
            },
            onblur(event) {
                fieldComponent.cpi.onInputBlur();
            },
        }
      );
    },
});

CSS

JS