> ## Documentation Index
> Fetch the complete documentation index at: https://guide.tipx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating a Discord Account

> Create a Discord account to access the server.

export const B2Video = ({fileKey, autoPlay = false, muted = false, loop = false, controls = true, aspectRatio = "16 / 9"}) => {
  const [videoUrl, setVideoUrl] = useState(null);
  const [error, setError] = useState(null);
  const parseAspectRatio = value => {
    if (typeof value === "number" && Number.isFinite(value) && value > 0) {
      return {
        width: value,
        height: 1
      };
    }
    if (typeof value === "string") {
      const trimmed = value.trim();
      if (trimmed.includes("/")) {
        const [rawWidth, rawHeight] = trimmed.split("/").map(part => Number(part.trim()));
        if (Number.isFinite(rawWidth) && Number.isFinite(rawHeight) && rawWidth > 0 && rawHeight > 0) {
          return {
            width: rawWidth,
            height: rawHeight
          };
        }
      }
      const numericRatio = Number(trimmed);
      if (Number.isFinite(numericRatio) && numericRatio > 0) {
        return {
          width: numericRatio,
          height: 1
        };
      }
    }
    return {
      width: 16,
      height: 9
    };
  };
  const containerStyle = {
    position: "relative",
    width: "100%",
    borderRadius: "12px",
    overflow: "hidden"
  };
  const overlayStyle = {
    position: "absolute",
    inset: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "currentColor",
    fontSize: "0.95rem",
    padding: "1rem",
    textAlign: "center"
  };
  const videoStyle = {
    position: "absolute",
    inset: 0,
    width: "100%",
    height: "100%",
    display: "block",
    objectFit: "cover"
  };
  const {width, height} = parseAspectRatio(aspectRatio);
  const paddingTop = `${height / width * 100}%`;
  const videoWidth = Math.round(width);
  const videoHeight = Math.round(height);
  useEffect(() => {
    let isMounted = true;
    setError(null);
    setVideoUrl(null);
    const fetchUrl = async () => {
      try {
        const res = await fetch(`https://api.tipx.ai/api/videos/url?key=${encodeURIComponent(fileKey)}`);
        if (!res.ok) throw new Error(`Failed to load video (${res.status})`);
        const data = await res.json();
        if (!isMounted) return;
        setVideoUrl(data.url);
      } catch (err) {
        console.error("B2Video error:", err);
        if (!isMounted) return;
        setError(err.message);
      }
    };
    fetchUrl();
    return () => {
      isMounted = false;
    };
  }, [fileKey]);
  const statusText = error ? "Unable to load video right now." : !videoUrl ? "Loading video..." : null;
  return <div style={containerStyle}>
      <div aria-hidden style={{
    paddingTop
  }} />

      {statusText && <div style={overlayStyle}>{statusText}</div>}

      {videoUrl && !error && <video controls={controls} autoPlay={autoPlay} muted={muted} loop={loop} playsInline preload="metadata" width={videoWidth} height={videoHeight} src={videoUrl} onError={() => setError("Failed to load video")} style={videoStyle} />}
    </div>;
};

Already know how to create a Discord account, or have one already? Skip ahead to the [next section](/part_one/joining-discord).

This video walks you through creating a Discord account from scratch. It only takes a couple of minutes.

<Frame>
  <div style={{ width: "100%", maxWidth: "300px", margin: "0 auto" }}>
    <B2Video fileKey="discord_creation_guide.mp4" autoPlay loop aspectRatio="1080 / 2384" />
  </div>
</Frame>

<Note>
  **Time: 3 minutes**
</Note>