YouTube

30 nonso100

Abrir en el editor Publica tu código

Recomendado

31 March 2026

HTML: Insertar vídeo de YouTube con efecto de televisión

2 September 2025

Pantalla de TV HTML con inserción de YouTube y efecto de falla

17 March 2026

Código HTML, CSS y JavaScript para clonar YouTube

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