# أليس هناك طريقة لتنسيق CSS لتضمينات tiktok و instagram؟

**URL:** https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962
**Category:** Development
**Created:** [3 مارس 2023، 3:09م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962 "2023-03-03T15:09:20Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3 مارس 2023، 3:09م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/1 "2023-03-03T15:09:21Z")

</div>

عند استخدام خيار “فحص العنصر” في صفحة المتصفح ونقله إلى CSS الخاص بتضمين تيك توك وإنستغرام، يعمل CSS، ولكن عند وضع كود CSS هذا في ديسكورس، لا يتغير شيء.

كنت أقوم بإزالة الخلفية البيضاء الضخمة من تضمين منشورات إنستغرام ووضع حد رفيع 1 بكسل وحد دائري 50 بكسل، وهو نفس ما فعلته لتيك توك والذي قلل أيضًا من حجم المنشور، حيث يظهر مقصوصًا على الهاتف المحمول، ولكن لم يتغير شيء.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3 مارس 2023، 3:35م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/2 "2023-03-03T15:35:53Z")

</div>

لا يمكنك بشكل عام معالجة محتوى إطار iframe الذي ينشأ من نطاق مختلف بسبب [سياسة المصدر نفسه](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) - بدون هذا النوع من القيود، يمكنك، على سبيل المثال، استبدال صورة بـ CSS تجعلها تبدو وكأن مستخدم Instagram نشر شيئًا لم ينشره.

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3 مارس 2023، 3:49م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/3 "2023-03-03T15:49:33Z")

</div>

ولكن ألا يمكنك فقط تغيير الخلفية، ونصف قطر الحدود، وحجم المنشور؟ (بدون تغيير محتوى الشخص؟)

في إنستغرام، توجد هذه الخلفية البيضاء التي تفسد المظهر الأسود، وبصرف النظر عن هذه المساحة الضخمة التي تفسد المنشور كثيرًا

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/5/0/f50c543fa9a16bc2f67fcd9431ee68960ef69a41.png)

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3 مارس 2023، 3:50م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/4 "2023-03-03T15:50:04Z")

</div>

على تيك توك، المنشور مثبت في الزاوية، وهناك هذه الحدود البيضاء السميكة المروعة

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/5/d/85db1c18a4073c178d9a9d32f219fabb7c295618.jpeg)

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3 مارس 2023، 3:50م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/5 "2023-03-03T15:50:39Z")

</div>

على تويتر تمكنت من إزالة الخلفية البيضاء وجعلها شفافة (للتكيف مع أي سمة) ووضع حدود دائرية بنصف قطر 50 بكسل وحدود رفيعة

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/a/e/6ae259f37ce088a388f79a40464941bcb3517f47.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3 مارس 2023، 3:56م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/6 "2023-03-03T15:56:02Z")

</div>

> [@mecay](#):
>
> ولكن ألا يمكنك فقط تغيير الخلفية، ونصف قطر الحدود، وحجم المنشور؟

يمكنك معالجة علامة iframe نفسها (إضافة حدود، وزوايا مستديرة، وما إلى ذلك)، ولكن بشكل عام، المحتوى الموجود بداخلها غير مسموح به تمامًا. توفر بعض الخدمات خيارات تضمين، مثل تويتر الذي لديه بعض الخيارات على [https://publish.twitter.com/](https://publish.twitter.com/)

 ![Screenshot 2023-03-03 at 10.54.57 AM](https://global.discourse-cdn.com/meta/original/4X/2/8/3/283218cae5e0233f24b7cc6558e2348b39cada47.png)

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3 مارس 2023، 4:02م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/7 "2023-03-03T16:02:32Z")

</div>

كيف يمكنني التلاعب بعلامة iframe الخاصة بـ instalgram و tiktok؟ لأن الطريقة التي فعلتها هنا لم تنجح

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [3 مارس 2023، 4:19م UTC](https://meta.discourse.org/t/isnt-there-a-way-to-style-css-tiktok-and-instagram-embed/256962/8 "2023-03-03T16:19:28Z")

</div>

إذا قمت بتضمين مقطع فيديو من تيك توك بهذه الطريقة:

`\u003ciframe src=\"https://www.tiktok.com/embed/v2/7181493818871565574\" height=\"800\" width=\"400\"\u003e`

يمكنك إضافة أنماط إلى سمة Discourse بهذه الطريقة:

```css
iframe {
  border: 1px solid red;
  border-radius: 20px;
}

```

ولكنك مقيد بتحرير وسم iframe نفسه فقط.