YouTube

31 nonso100

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 March 2026

Code HTML CSS JavaScript clone de YouTube

21 July 2025

Écran TV HTML avec intégration et effets 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