Video not displayed

wenping.wang · 2017-11-30T03:35:57.969Z

I get all the tweet DOMs using tweet preview API, and save it to a HTML file,
but tweet is well displayed except the video part

tweetpreview.png1301x773 18.4 KB

The response get by tweet preview API.

<!DOCTYPE html> <html> <head>  <meta charset="utf-8" />      <link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.5fb83157e823c66b4457.css" rel="stylesheet" /> </head>  <body>       <div class="Tweet--timeline   Tweet   Tweet--web          "  data-tweet-id="931364566738415616">    <img class="Tweet-avatar" src="https://pbs.twimg.com/profile_images/870161439578771457/v_z5yXAZ_normal.jpg" width="48" height="48" alt=""/>    <div class="Tweet-body">     <div class="Tweet-header">       <div class="Tweet-userData">         <a href="https://twitter.com/hottolink_ag" target="_blank" class="Tweet-userLink">           <span class="Tweet-name">Hottolink_AG</span>                <span class="Icon Icon--protected"></span>            <span class="Tweet-screenName">@hottolink_ag</span>         </a>       </div>        <span class="Tweet-timeLabel">         <a class="Tweet-timestamp" href="https://twitter.com/hottolink_ag/status/931364566738415616" target="_blank" data-time="1510889591">           11月17日         </a>       </span>      </div>         <div class="Tweet-text " dir="">test dynamodb video on 11/17 </div>           <div class="CardContainer   CardContainer--timeline       CardContainer--web    " >             <div class="VideoCard">      <div class="Card-video">   <iframe class="Card-videoIframe" src="https://twitter.com/i/videos/931364566738415616?square_corners=1"></iframe>  </div>    </div>               </div>       </div>     <div class="Tweet-footer">         <div class="Tweet-actions ">   <button class="Tweet-action Tweet-action--reply" type="button">     <span class="Icon Icon--reply"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--retweet" type="button">     <span class="Icon Icon--retweet"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--favorite Tweet-action--like" type="button">     <span class="Icon Icon--heart"></span>     <span class="Tweet-actionCount">##</span>   </button>   <button class="Tweet-action Tweet-action--dm" type="button">     <span class="Icon Icon--dm"></span>   </button> </div>             <div class="Tweet-context Tweet-context--promotion">   <div class="Tweet-badge Tweet-badge--promotedBy">      <span class="Icon Icon--promoted"></span>      <span class="Tweet-badgeText">プロモーション</span>   </div> </div>    </div> </div>   </body> </html>

wenping.wang · 2017-11-30T03:39:04.122Z

BTW, the tweet preview should look like as the following screenshot from Ads UI.

tweetpreview_adsUI.png1203x376 176 KB

imit8me · 2017-11-30T20:04:46.931Z

Hey @wenping.wang

Can you provide the entire request and response bodies that you’ve used to generate this preview?

Thanks!

wenping.wang · 2017-12-01T00:35:14.584Z

@imit8me
The request command:
twurl -H "https://ads-api.twitter.com" -XGET "/2/accounts/18ce54iditw/tweet/preview/:tweet_id" | jq '.data[]'

The following is the response that \ is removed.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link href="https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.5fb83157e823c66b4457.css" rel="stylesheet" /> </head> <body> <div class="Tweet--timeline Tweet Tweet--web " data-tweet-id="931364566738415616"> <img class="Tweet-avatar" src="https://pbs.twimg.com/profile_images/870161439578771457/v_z5yXAZ_normal.jpg" width="48" height="48" alt=""/> <div class="Tweet-body"> <div class="Tweet-header"> <div class="Tweet-userData"> <a href="https://twitter.com/hottolink_ag" target="_blank" class="Tweet-userLink"> <span class="Tweet-name">Hottolink_AG</span> <span class="Icon Icon--protected"></span> <span class="Tweet-screenName">@hottolink_ag</span> </a> </div> <span class="Tweet-timeLabel"> <a class="Tweet-timestamp" href="https://twitter.com/hottolink_ag/status/931364566738415616" target="_blank" data-time="1510889591"> 11月17日 </a> </span> </div> <div class="Tweet-text " dir="">test dynamodb video on 11/17 </div> <div class="CardContainer CardContainer--timeline CardContainer--web " > <div class="VideoCard"> <div class="Card-video"> <iframe class="Card-videoIframe" src="https://twitter.com/i/videos/931364566738415616?square_corners=1"></iframe> </div> </div> </div> </div> <div class="Tweet-footer"> <div class="Tweet-actions "> <button class="Tweet-action Tweet-action--reply" type="button"> <span class="Icon Icon--reply"></span> <span class="Tweet-actionCount">##</span> </button> <button class="Tweet-action Tweet-action--retweet" type="button"> <span class="Icon Icon--retweet"></span> <span class="Tweet-actionCount">##</span> </button> <button class="Tweet-action Tweet-action--favorite Tweet-action--like" type="button"> <span class="Icon Icon--heart"></span> <span class="Tweet-actionCount">##</span> </button> <button class="Tweet-action Tweet-action--dm" type="button"> <span class="Icon Icon--dm"></span> </button> </div> <div class="Tweet-context Tweet-context--promotion"> <div class="Tweet-badge Tweet-badge--promotedBy"> <span class="Icon Icon--promoted"></span> <span class="Tweet-badgeText">プロモーション</span> </div> </div> </div> </div> </body> </html>

imit8me · 2017-12-06T00:41:31.063Z

Hey @wenping.wang apologies for the delay in response, but can you provide the consumer key or client app ID used to make this request?

Thanks!

wenping.wang · 2017-12-06T00:53:47.125Z

@imit8me

$ twurl accounts
hottolink_ag
  JLjRwrAhDyNGf0PdkVINip4S2
  DLDrmBMrejd7jXuqmYyeZyZzm (default)

imit8me · 2018-01-11T19:18:51.504Z

Hey @wenping.wang

Apologies for the delay in response, but I wanted to follow up on your issue. It looks like the issue has been resolved, and I’m able to see the Tweet preview correctly:

twurl -H "https://ads-api.twitter.com" -XGET "/2/accounts/18ce54iditw/tweet/preview/931364566738415616" | jq '.data[]'

{
  "platform": "web",
  "preview": "<!DOCTYPE html> <html> <head>   <meta charset=\"utf-8\" />      <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.28d222661f801ddf2a5d.css\" rel=\"stylesheet\" /> </head>  <body>       <div class=\"Tweet--timeline   Tweet   Tweet--web          \"  data-tweet-id=\"931364566738415616\">    <img class=\"Tweet-avatar\" src=\"https://pbs.twimg.com/profile_images/870161439578771457/v_z5yXAZ_normal.jpg\" width=\"48\" height=\"48\" alt=\"\"/>    <div class=\"Tweet-body\">     <div class=\"Tweet-header\">       <div class=\"Tweet-userData\">         <a href=\"https://twitter.com/hottolink_ag\" target=\"_blank\" class=\"Tweet-userLink\">           <span class=\"Tweet-name\">Hottolink_AG</span>                            <span class=\"Tweet-screenName\">@hottolink_ag</span>         </a>       </div>        <span class=\"Tweet-timeLabel\">         <a class=\"Tweet-timestamp\" href=\"https://twitter.com/hottolink_ag/status/931364566738415616\" target=\"_blank\" data-time=\"1510889591\">           Nov 16         </a>       </span>      </div>         <div class=\"Tweet-text \" dir=\"\">test dynamodb video on 11/17 </div>           <div class=\"CardContainer   CardContainer--timeline       CardContainer--web    \" >             <div class=\"VideoCard\">      <div class=\"Card-video\">   <iframe class=\"Card-videoIframe\" src=\"https://twitter.com/i/videos/931364566738415616?square_corners=1\"></iframe>  </div>    </div>               </div>       </div>     <div class=\"Tweet-footer\">         <div class=\"Tweet-actions \">   <button class=\"Tweet-action Tweet-action--reply\" type=\"button\">     <span class=\"Icon Icon--reply\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--retweet\" type=\"button\">     <span class=\"Icon Icon--retweet\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--favorite Tweet-action--like\" type=\"button\">     <span class=\"Icon Icon--heart\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--dm\" type=\"button\">     <span class=\"Icon Icon--dm\"></span>   </button> </div>             <div class=\"Tweet-context Tweet-context--promotion\">   <div class=\"Tweet-badge Tweet-badge--promotedBy\">      <span class=\"Icon Icon--promoted\"></span>      <span class=\"Tweet-badgeText\">Promoted</span>   </div> </div>    </div> </div>   </body> </html> "
}
{
  "platform": "android",
  "preview": "<!DOCTYPE html> <html> <head>   <meta charset=\"utf-8\" />      <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.28d222661f801ddf2a5d.css\" rel=\"stylesheet\" /> </head>  <body>       <div class=\"Tweet--timeline   Tweet   Tweet--android          \"  data-tweet-id=\"931364566738415616\">    <img class=\"Tweet-avatar\" src=\"https://pbs.twimg.com/profile_images/870161439578771457/v_z5yXAZ_normal.jpg\" width=\"48\" height=\"48\" alt=\"\"/>    <div class=\"Tweet-body\">     <div class=\"Tweet-header\">       <div class=\"Tweet-userData\">         <a href=\"https://twitter.com/hottolink_ag\" target=\"_blank\" class=\"Tweet-userLink\">           <span class=\"Tweet-name\">Hottolink_AG</span>                            <span class=\"Tweet-screenName\">@hottolink_ag</span>         </a>       </div>        <span class=\"Tweet-timeLabel\">         <a class=\"Tweet-timestamp\" href=\"https://twitter.com/hottolink_ag/status/931364566738415616\" target=\"_blank\" data-time=\"1510889591\">           Nov 16         </a>       </span>      </div>         <div class=\"Tweet-text \" dir=\"\">test dynamodb video on 11/17 </div>           <div class=\"CardContainer   CardContainer--timeline       CardContainer--android    \" >             <div class=\"VideoCard\">      <div class=\"Card-video\">   <iframe class=\"Card-videoIframe\" src=\"https://twitter.com/i/videos/931364566738415616?square_corners=1\"></iframe>  </div>    </div>               </div>       </div>     <div class=\"Tweet-footer\">         <div class=\"Tweet-actions \">   <button class=\"Tweet-action Tweet-action--reply\" type=\"button\">     <span class=\"Icon Icon--reply\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--retweet\" type=\"button\">     <span class=\"Icon Icon--retweet\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--favorite Tweet-action--like\" type=\"button\">     <span class=\"Icon Icon--heart\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--dm\" type=\"button\">     <span class=\"Icon Icon--dm\"></span>   </button> </div>             <div class=\"Tweet-context Tweet-context--promotion\">   <div class=\"Tweet-badge Tweet-badge--promotedBy\">      <span class=\"Icon Icon--promoted\"></span>      <span class=\"Tweet-badgeText\">Promoted</span>   </div> </div>    </div> </div>   </body> </html> "
}
{
  "platform": "iphone",
  "preview": "<!DOCTYPE html> <html> <head>   <meta charset=\"utf-8\" />      <link href=\"https://ton.twimg.com/macaw-campaigns/css/tweet_preview.bundle.28d222661f801ddf2a5d.css\" rel=\"stylesheet\" /> </head>  <body>       <div class=\"Tweet--timeline   Tweet   Tweet--iphone          \"  data-tweet-id=\"931364566738415616\">    <img class=\"Tweet-avatar\" src=\"https://pbs.twimg.com/profile_images/870161439578771457/v_z5yXAZ_normal.jpg\" width=\"48\" height=\"48\" alt=\"\"/>    <div class=\"Tweet-body\">     <div class=\"Tweet-header\">       <div class=\"Tweet-userData\">         <a href=\"https://twitter.com/hottolink_ag\" target=\"_blank\" class=\"Tweet-userLink\">           <span class=\"Tweet-name\">Hottolink_AG</span>                            <span class=\"Tweet-screenName\">@hottolink_ag</span>         </a>       </div>        <span class=\"Tweet-timeLabel\">         <a class=\"Tweet-timestamp\" href=\"https://twitter.com/hottolink_ag/status/931364566738415616\" target=\"_blank\" data-time=\"1510889591\">           Nov 16         </a>       </span>      </div>         <div class=\"Tweet-text \" dir=\"\">test dynamodb video on 11/17 </div>           <div class=\"CardContainer   CardContainer--timeline       CardContainer--iphone    \" >             <div class=\"VideoCard\">      <div class=\"Card-video\">   <iframe class=\"Card-videoIframe\" src=\"https://twitter.com/i/videos/931364566738415616?square_corners=1\"></iframe>  </div>    </div>               </div>       </div>     <div class=\"Tweet-footer\">         <div class=\"Tweet-actions \">   <button class=\"Tweet-action Tweet-action--reply\" type=\"button\">     <span class=\"Icon Icon--reply\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--retweet\" type=\"button\">     <span class=\"Icon Icon--retweet\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--favorite Tweet-action--like\" type=\"button\">     <span class=\"Icon Icon--heart\"></span>     <span class=\"Tweet-actionCount\">##</span>   </button>   <button class=\"Tweet-action Tweet-action--dm\" type=\"button\">     <span class=\"Icon Icon--dm\"></span>   </button> </div>             <div class=\"Tweet-context Tweet-context--promotion\">   <div class=\"Tweet-badge Tweet-badge--promotedBy\">      <span class=\"Icon Icon--promoted\"></span>      <span class=\"Tweet-badgeText\">Promoted</span>   </div> </div>    </div> </div>   </body> </html> "
}

The preview itself looks like this:

CodePen

WdJZpV

...

Hope that helps!

juanshishido · 2018-02-04T02:27:39.624Z