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("div", { styles: { height: "315px" } }, [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(); }, } ); }, });