Cách hiển thị phương tiện nội tuyến và nhúng trên MSN
Tìm hiểu cách hiển thị hình ảnh, video, trình chiếu và nhúng xã hội đúng cách trong nội dung bài viết của bạn bằng HTML và Media RSS. Hướng dẫn này trình bày các phương pháp tốt nhất cho thẻ, siêu dữ liệu và định dạng được hỗ trợ để đảm bảo kết xuất mượt mà trên MSN.
Trong bài viết này
Hiển thị hình ảnh với HTML nội tuyến
Hiển thị hình ảnh với phương tiện RSS
Nhúng phương tiện truyền thông xã hội
Hướng dẫn HTML
HTML có thể được sử dụng để xác định trường nội dung của một bài viết hoặc trường mô tả hình ảnh trang chiếu trong một trình chiếu. Trường này không được phép ở bất kỳ trường nào khác. Có vài hướng dẫn chung cần ghi nhớ khi sử dụng HTML:
- Dịch vụ Nhập của Microsoft sẽ luôn xóa các thẻ không cho phép. Nội dung thẻ và trẻ em cũng có thể bị xóa.
- Microsoft Ingestion Services có thể dọn sạch HTML khỏi các thành phần có thể ảnh hưởng đến trải nghiệm kết xuất chẳng hạn như kiểu nội tuyến.
- Chúng tôi khuyên người phát hành nên duy trì cấu trúc phân cấp HTML đơn giản và tránh các cấu trúc phân cấp được liên kết sâu hơn 10 cấp độ.
- Tránh sử dụng nhiều thẻ <br liên> tiếp. <Ngắt dòng br> ở cuối tài liệu sẽ bị loại bỏ.
- <iframe được> sử dụng cho bất kỳ mục đích nào không được đề cập rõ ràng trong tài liệu này sẽ bị loại bỏ.
Thẻ HTML được cho phép
Các thẻ này được cho phép trong nội dung bài viết:
- Kiểu phông<b>, <i>, <em>, <strong>
- Cỡ phông<sub>, <sup>, <small>
- Tiêu đề<h1>, <h2>, <h3>, <h4>, <h5>
- Liên kết<a> - giá trị href tốt nhất nên sử dụng HTTPS, HTTP và mailto:
- Hình ảnh<Img>
- Bảng<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- Danh sách<ol>, <ul>, <li>
- Nhóm<span>, <div>, <p>, <br>
- Embeds<blockquote>, <iframe chỉ> có thể chấp nhận được đối với video và nhúng xã hội được hỗ trợ.
Lưu ý
Nói chung, các thuộc tính sẽ bị loại bỏ khỏi tất cả các phần tử trừ khi chúng được dùng bởi các tính năng cơ bản như href <trong a> và src trong <img>.
Thẻ HTML bị hạn chế
Các thẻ sau đây sẽ luôn bị loại bỏ khỏi nội dung của bài viết đến và có thể dẫn đến nội dung bị từ chối:
- <kiểu>
- <Kịch bản>
- <đối tượng>
- <diễu hành>
- <Applet>
- <nhúng>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Hình>
- <media>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY</a>
Hình ảnh
Vị trí hình ảnh
Nếu bạn thêm một hình ảnh vào nội dung HTML <của bài viết bằng cách sử dụng thẻ img><hoặc hình> , nó sẽ tự động bảo toàn vị trí của nó trong nội dung. Nếu không, nếu bạn sử dụng <phương tiện:nội dung>, hình ảnh của bạn có thể được Đặt ở một vị trí được Dịch vụ Nhập tự động chọn. Nếu thẻ có URL "src" khớp với URL <của yếu tố media:content> , hình ảnh sẽ chỉ được nhập một lần và sẽ nằm ở nơi đặt thẻ img.
Ảnh đầu trang
Bạn có thể thông báo nhập rằng một hình ảnh cụ thể có thể được sử dụng làm hình ảnh nổi bật trong thẻ khuyến mãi bằng cách thêm class="type:primaryImage" <vào thẻ img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Hiển thị hình ảnh với HTML nội tuyến
<img> tags
Bạn có thể cung cấp siêu dữ liệu bổ sung khi sử <dụng thẻ img> bên trong nội dung HTML của mục nguồn cấp. Nếu siêu dữ liệu được cung cấp cho cùng một URL hình ảnh cả thẻ nội tuyến và sử dụng thẻ Media RSS, <siêu dữ liệu phương tiện:> nội dung sẽ luôn được ưu tiên.
Bạn có thể đặt tất cả siêu dữ liệu hình ảnh nội tuyến trong HTML bằng cách tận dụng các thuộc tính data-*như trong ví dụ sau đây:
<content:encoded> <![CDATA[ <p>Article body paragraph 1</p> <img src="http://contoso.com/image.jpg" width="620" height="569" title="Image title" alt="Image alt text" data-portal-copyright="Joe Gargery/Fabrikam Images" data-has-syndication-rights="1" data-license-id="698526" data-licensor-name="Licensor name" data-focal-region="x1:245,y1:145,x2:520,y2:320" /> <p>Article body paragraph 2</p></content:encoded>
<hình thẻ>
Bạn cũng có thể điền thẻ <img với tham> số tùy chọn làm ví dụ trước.
<content:encoded> <![CDATA[ <p>Article body paragraph 1</p> <figure> <img src="http://contoso.com/image.jpg" width="620" title="image title" alt="Image alt text"/> <figcaption> Image caption <span class="copyright">Image copyrights</span> </figcaption> </figure> <p>Article body paragraph 2</p></content:encoded>
Hiển thị hình ảnh với phương tiện RSS
Cách được đề xuất để thêm siêu dữ liệu hình ảnh là sử dụng đa phương tiện RSS <:thành phần nội dung> để chỉ định siêu dữ liệu hình ảnh. Theo mặc định, hình ảnh sẽ được đặt ở đầu bài viết.
<media:content> elements cannot be specified inside article's body. Chúng phải được chỉ định là con ngay lập tức của các yếu tố mục gốc (<mục> trong RSS hoặc mục <trong> Atom).
<!-- REQUIRED: URL must be provided for media elements NOTE: you need to specify medium and set to "image" or "video" depending on the content type --><media:content url="https://contoso.com/image.jpg" type="image/jpeg" medium="image"> <!-- provide image credits (such as original photographer..etc) in this tag--> <media:credit>Joe Gargery/Fabrikam Images</media:credit> <!-- image title --> <media:title>Image1 title</media:title> <!-- use the text tag to specify alt-text --> <media:text>Image1 alt-text</media:text> <!-- to provide focal region information, you may use Microsoft Ingestion namespace as follows --> <mi:focalRegion> <mi:x1>245</mi:x1> <mi:y1>145</mi:y1> <mi:x2>520</mi:x2> <mi:y2>320</mi:y2> </mi:focalRegion> <!-- Following 3 fields are used to specify image rights. If you do not indicate HasSyndicationRights as false, we assume you have the rights.--> <mi:hasSyndicationRights>1</mi:hasSyndicationRights> <mi:licenseId>698525</mi:licenseId> <mi:licensorName>Licensor name</mi:licensorName></media:content>
Video
MSN hỗ trợ First-Party player (1PP) và các cấu hình Máy nghe nhạc bên thứ ba (3PP).
Video 1PP: Trong trường hợp này, URL tệp video phải được cung cấp để Dịch vụ Nhập của Microsoft tải xuống và lưu trữ tệp trên máy chủ MSN. Video 1PP sẽ được kết xuất bằng cách sử MSN Video Player.
Video 3PP: Video 3PP được phát trên trình phát dành riêng cho nhà cung cấp (ví dụ: YouTube, DailyMotion, v.v...)
Hiển thị video với HTML
1PP
Bạn có thể sử dụng <thẻ HTML video> để thể hiện video nội tuyến.
<video id="8172818" title="Video title" poster="https://contoso.com/thumbnail.jpg" data-description="this is a sample inline video" data-portal-copyright="Joe Gargery/Fabrikam Videos"> <source src="https://contoso.com/video.mp4" type="video/mp4"></source> </video>
3PP
YouTube là trình phát 3PP duy nhất được hỗ trợ sử dụng yếu <tố iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Quan trọng
Do những thay đổi nền tảng gần đây về phía YouTube, MSN hiện không thể điều tiết nhúng YouTube. Do đó, tất cả các video YouTube 3PP được gửi qua nguồn cấp dữ liệu hoặc bài viết HTML sẽ bị từ chối trong quá trình nhập. Sự cố này ảnh hưởng đến một phần nhỏ nội dung toàn cầu nhưng các đối tác nên tránh sử dụng nhúng YouTube cho đến khi có thông báo thêm. Chúng tôi sẽ cập nhật hướng dẫn này sau khi hỗ trợ được khôi phục.
Hiển thị video với phương tiện RSS
Để nhúng phương tiện bằng cách sử dụng Media RSS, <media:content><media:group> và các thành phần phải được đặt bên ngoài nội dung HTML<item> và được thêm vào như là con ngay lập tức của các yếu tố (RSS) <entry> hoặc (ATOM). Các thẻ này không thể bị ngắt hoặc kết hợp với nội dung HTML bên trong nội dung bài viết (ví dụ: <content:encoded>trong ) hoặc chúng sẽ bị bỏ qua trong quá trình nhập.
1PP
<!-- REQUIRED: URL must be provided for media elements. It is also used to uniquely identify the video.NOTE: you need to specify medium and set to "image" or "video" depending on the contenttype --><media:content url="https://contoso.com/video.mp4" duration="91" type="video/mp4" medium="video"> <!-- a <guid> may be specified to uniquely identify the video. If not specified, the URL will be used as an identifier. --> <guid>8172818</guid> <!-- video title must be specified. --> <media:title>Video title</media:title> <!-- video image thumnail is required if the video is 3PP (except YouTube) --> <media:thumbnail url="https://contoso.com/image.jpg"/> <!-- provide video attribution in media:credit, recommended format is: Author name/Agency name --> <media:credit>Joe Gargery/Fabrikam Videos</media:credit> <!-- description is used to specify caption text displayed below the video --> <media:description>Video description</media:description></media:content>
YouTube
<media:content type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="117" url="https://www.youtube.com/v/XnZ_J3l_0z4"> <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" /> <media:player url="https://www.youtube.com" /> <media:title>Video title</media:title> <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>
DailyMotion
<media:content type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="117" url="https://www.dailymotion.com/video/x6qnrdo"> <media:thumbnail url="https://contoso.com/images/thumb60-zTG.jpg" /> <media:player url="https://www.dailymotion.com" /> <media:title>Video title</media:title> <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>
Khác
Người chơi video 3PP được hỗ trợ phải được chỉ định khi thương hiệu của nhà xuất bản được triển khai. Đối với các trình phát video 3PP được hỗ trợ này, bạn phải cung cấp mã định danh video <duy nhất thông qua yếu tố guid> cho tất cả các video 3PP.
<!-- REQUIRED: <guid>, duration, title and description are required fields --><media:content type="application/x-shockwave-flash" medium="video" isDefault="true" expression="full" duration="117" url="https://contoso.com/videos/268192"> <guid>268192</guid> <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" /> <media:player url="https://contos.com/player" /> <media:title>Video title</media:title> <media:description>Video description</media:description> <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>
Phụ đề chi tiết trên video
Bạn có thể sử dụng <thành phần media:subtitle> để cung cấp tệp định dạng Văn bản Hẹn giờ bên ngoài dựa trên định dạng Văn bản định giờ W3C. Hiện chỉ TTML 1 được hỗ trợ.
<media:content type="video/mp4" duration="75" medium="video" url="https://contoso.com/videos/sports.mp4"> <.....> <.....> <media:subTitle type="application/ttml" lang="en" href="https://www.contols.org/closedcaptions.ttml"
/></media:content>
Các liên kết được hỗ trợ
Tệp video cần được lưu ở định dạng được phê duyệt, chẳng hạn như tệp MP4. Files được phép nếu chúng đến từ trang web của riêng bạn hoặc được lưu trữ trên một máy chủ như AWS.
Liên kết không được hỗ trợ
Các liên kết Dropbox, liên kết YouTube, v.v., không được hỗ trợ trong nguồn cấp RSS. Điều này là do video không thể dễ dàng hoặc ngay lập tức kéo từ các liên kết đó vì chúng được 'cổng'.
Các nối kết liên quan
Mô-đun "xem thêm từ nhà cung cấp" là cơ hội cho các thương hiệu hiển thị ba liên kết nội dung trên bài viết và các trang thư viện, liên kết đến trang web riêng của thương hiệu.
Có hai cách để quyết định ba nối kết được hiển thị trong mô-đun này:
- Tự động điền các bài viết gần đây nhất – Microsoft sẽ hiển thị liên kết đến các câu chuyện gần đây nhất mà microsoft đã nhập vào trong số các nguồn cấp dữ liệu được cung cấp từ thương hiệu của bạn. Chúng tôi sử dụng liên kết chuẩn theo mặc định nhưng nếu không được cung cấp, Microsoft sẽ không hiển thị liên kết này.
- Cung cấp liên kết liên quan với bài viết – xem bên dưới để biết ví dụ về cách thực hiện việc này. Nếu tùy chọn này được chọn, thì bạn phải cung cấp ít nhất ba liên kết liên quan với mỗi mục nội dung trong nguồn cấp dữ liệu.
Các liên kết liên quan có thể được thêm dưới dạng thành phần con vào các mục nguồn cấp dữ liệu mức gốc (bài viết và Bộ sưu tập). Nói chung, nhà xuất bản phải cung cấp ít nhất 3 liên kết cho họ để xuất hiện trong phần "liên quan" trong msn.
Tất cả các liên kết liên quan và nội tuyến tốt nhất nên sử dụng lược đồ HTTPS.
Để chỉ định trong Atom, các nhà xuất bản chỉ có thể sử dụng nguyên tố này. Họ cũng cần sử dụng cùng một yếu tố trong RSS sau khi khai báo không gian tên Atom. Ngoài ra, vì hình thu nhỏ là bắt buộc, bạn có thể kết hợp với đa phương <tiện:> thành phần, như minh họa trong ví dụ này:
<item><…> <!-- Example of specifying 3 Related Links. In RSS, you need to use of the atom namespace `xmlns:atom="http://www.w3.org/2005/Atom"` --> <!-- REQUIRED: links must have valid "href" and "title" attribute values.--> <atom:link rel="related" type="text/html" href="https://contoso.com/news_1.html" title="New IRS proposal"> <!-- REQUIRED: you must provide a thumbnail image with the link --> <media:thumbnail url="https://contoso.com/image2.jpg" /> </atom:link> <atom:link rel="related" type="text/html" href="https://contoso.com/news_2.html" title="New IRS proposal"> <media:thumbnail url="https://contoso.com/image2.jpg" /> </atom:link> <atom:link rel="related" type="text/html" href="https://contoso.com/news_3.html" title="New IRS proposal"> <media:thumbnail url="https://contoso.com/image3.jpg" /> </atom:link></item>
Slideshows
Bạn có thể thêm Trình chiếu tại chỗ vào một vị trí cụ thể trong nội dung HTML <của bài viết bằng cách sử dụng một cấu trúc đặc biệt div class="Gallery"><> làm bộ chứa một loạt các thành phần hình.
<div class="slideshow"> <!-- use <cite> to specify an authro for the inline slideshow. If not specified, the parent article's author will be assigned --> <cite>Slideshow author</cite> <!-- use <title> to specify an authro for the inline slideshow. If not specified, the parent article's title will be assigned --> <title>Slideshow title</title> <!-- each figure element is considered a separate slide --> <figure> <img src="https://v3spec.msn.com/image1.jpg" title="slide 1 title" /> <figcaption>slide 1 caption <span class="copyright">slide 1 image copyrights</span> </figcaption> </figure> <figure> <img src="https://v3spec.msn.com/image2.jpg" title="slide 2 title" /> <figcaption>slide 2 caption <span class="copyright">Joe Gargery/Fabrikam Images</span> </figcaption> </figure></div>
Hiển thị trình chiếu với phương tiện RSS
Để thêm Trình chiếu tại chỗ, <hãy sử dụng yếu tố media:group><> làm con của mục bạn muốn nhúng Trình chiếu.
Vị trí Trình chiếu RSS Phương tiện nội tuyến trong bài viết được quyết định bởi Dịch vụ Nhập. Nếu bạn cần đặt Trình chiếu ở một vị trí cụ thể, thay vào đó hãy sử dụng HTML.
<!-- Note that in the case of embedded slideshow, the slideshow title and description will be the same as the parent article's--><media:group> <!-- Inline slideshow title. If you do not specify a title for inline slideshow, the slideshow will be ingested with the same title of the parent article. --> <media:title>Slideshow title</media:title> <!-- Inlien slideshow author. Similar to title, if not specified, the slideshow will have the same author of the parent article. --> <media:credit role="author">Slideshow author</media:credit> <!-- in this case you can provide consecutive slides in <media:content> --> <media:content url="https://contoso.com/image1.jpg" type="image/jpeg" medium="image"> <!-- provide iamge attribution in media:credit, recommended format is: Photographer name/Agency name --> <media:credit>Joe Gargery/Fabrikam Images</media:credit> <!-- REQUIRED: slide title must be provided in the following element --> <media:title>Slide 1 title</media:title> <!-- alt text for slide image--> <media:text>Slide 1 alt-text</media:text> <!-- slide caption should be added in the description element. HTML is allowed in this field when you wrap content within a CDATA structure. --> <media:description> <![CDATA[ <p>Slide 1 description</p> ]]> </media:description> <!-- additional slide image metadata --> <mi:focalRegion> <mi:x1>245</mi:x1> <mi:y1>140</mi:y1> <mi:x2>540</mi:x2> <mi:y2>320</mi:y2> </mi:focalRegion> <mi:hasSyndicationRights>1</mi:hasSyndicationRights> <mi:licenseId>698525</mi:licenseId> <mi:licensorName>Licensor name</mi:licensorName> </media:content> <media:content url="https://contoso.com/image2.jpg" type="image/jpeg" medium="image"> <media:credit>Joe Gargery/Fabrikam Images</media:credit> <media:title>Slide 2 title</media:title> <media:text>Slide 2 alt-text</media:text> <media:description>Slide 2 description</media:description> <mi:focalRegion> <mi:x1>110</mi:x1> <mi:y1>312</mi:y1> <mi:x2>615</mi:x2> <mi:y2>520</mi:y2> </mi:focalRegion> <mi:hasSyndicationRights>1</mi:hasSyndicationRights> <mi:licenseId>698526</mi:licenseId> <mi:licensorName>Licensor name</mi:licensorName> </media:content></media:group>
Nhúng phương tiện truyền thông xã hội
Các nhúng xã hội sau đây có thể được chèn vào trong nội dung HTML bài viết:
- X
- Infogram
- Spotify
- Phát triển
- Google Maps
- Giphy
- TikTok
Bạn có thể sử dụng mã nhúng tiêu chuẩn được đề xuất bởi mỗi nhà cung cấp xã hội để đảm bảo nhúng được giữ nguyên trong bài viết.
Tất cả các URL trỏ đến nguồn nhúng xã hội hoàn toàn phải là https hoặc nếu không sẽ bị từ chối.
Dưới đây là một số ví dụ nhúng:
X
<blockquote class="twitter-tweet" align="center" width="350"> <p>We’re more optimistic than ever. The future will surprise the pessimists </p>— Bill Gates (@BillGates) <a href="https://twitter.com/BillGates/status/835506391339139073">February 25, 2017</a></blockquote>
Facebook (iframe)
<iframe frameborder="0" allowTransparency="true" src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcontosoice%2Fposts%2F1651549695142860&width=500"></iframe>
Facebook (div)
<div class="fb-post" data-href="https://www.facebook.com/contosoice/posts/1651549695142860" data-width="500" data-show-text="true"> <blockquote cite="https://www.facebook.com/contosoice/posts/1651549695142860"> <p>Post title</p>Posted by <a href="https://www.facebook.com/contosoice/">Contoso ICE</a> on <a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a> </blockquote></div>
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BjxlMSWnMJ-/" data-instgrm-version="8"> <div> <p><a href="https://www.instagram.com/p/BjxlMSWnMJ-/">Imagine putting 864 servers at the bottom of the ocean #ProjectNatick.</a></p> <p>A post shared by <a href="https://www.instagram.com/microsoft/"> Microsoft</a> (@microsoft) on <time>Apr 22, 2018 at 11:47am PDT</time></p> </div></blockquote>
Tiện ích ghim của Pinterest
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Tiện ích bảng Pinterest
<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/official-news/"></a>
Tiện ích hồ sơ Pinterest
<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/"></a>
Infogram (phản hồi)
<script id="infogram_0_df4c17c3-3940-4434-b3a5-b1ef8ac096ef" title="Infogram: 8 years of greatness (infographic)" src="https://e.infogram.com/js/dist/embed.js?qlT" type="text/javascript"></script>
Infogram (iframe)
<iframe src="https://e.infogram.com/df4c17c3-3940-4434-b3a5-b1ef8ac096ef?src=embed" title="Infogram: 8 years of greatness (infographic)" width="700" height="8127" scrolling="no" frameborder="0" style="border:none;" allowfullscreen="allowfullscreen"></iframe>
Spotify
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Thịnh vượng (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Mạnh mẽ (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google Maps
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13981.509066247283!2d-81.79698!3d28.827626!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x64c6defc49caa9f0!2sLake-Sumter%20State%20College!5e0!3m2!1sen!2sus!4v1587812382206!5m2!1sen!2sus" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Giphy
<iframe src="https://giphy.com/embed/1WbNcJYD0ruf8nl3OJ" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<blockquote class="reddit-card" data-card-created="1596039116"> <a href="https://www.reddit.com/r/microsoft/comments/hg4uiq/microsoft_official_support_thread/"> Microsoft: Official Support Thread</a> from <a href="http://www.reddit.com/r/microsoft">r/microsoft </a></blockquote><script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>
TikTok
<blockquote class="tiktok-embed" cite=https://www.tiktok.com/@testtest/video/microsoft_official_support_thread data-video-id="microsoft_official_support_thread" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@bronniiieee" href=https://www.tiktok.com/@bronniiieee rel="noopener noreferrer">@billgates</a> <p>Who is THAT?</p> <a target="_blank" title="Music" href=https://www.tiktok.com/music/microsoft_official_support_thread rel="noopener noreferrer">Microsoft: Official Support Thread</a> </section></blockquote>