How to show a floating link on a video shared on Twitter. Like the one below:
https://twitter.com/TheNationalNews/status/1319169113110040578
It comes when the user hovers the cursor over the video. Check this screenshot:
It looks like an accessibility feature. Here's what I'm getting when inspecting the element:
<div>
<div style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;">
<div aria-label="Visit thenationalnews.com" role="button" data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-loe9s5 r-42olwf r-sdzlij r-1phboty r-rs99b7 r-1w2pmg r-1t68eob r-1vuscfd r-1dhvaqw r-1ny4l3l r-1fneopy r-u8s1d r-1ki14p2 r-o7ynqc r-6416eg r-lrvibr">
<div dir="auto" class="css-901oao r-1awozwy r-jwli3a r-6koalj r-18u37iz r-16y2uox r-1qd0xha r-a023e6 r-vw2c0b r-1777fci r-eljoum r-dnmrzs r-bcqeeo r-q4m81j r-qvutc0">
<svg viewBox="0 0 24 24" class="r-jwli3a r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-1sp7lne r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue">
<g>
<path d="M11.96 14.945c-.067 0-.136-.01-.203-.027-1.13-.318-2.097-.986-2.795-1.932-.832-1.125-1.176-2.508-.968-3.893s.942-2.605 2.068-3.438l3.53-2.608c2.322-1.716 5.61-1.224 7.33 1.1.83 1.127 1.175 2.51.967 3.895s-.943 2.605-2.07 3.438l-1.48 1.094c-.333.246-.804.175-1.05-.158-.246-.334-.176-.804.158-1.05l1.48-1.095c.803-.592 1.327-1.463 1.476-2.45.148-.988-.098-1.975-.69-2.778-1.225-1.656-3.572-2.01-5.23-.784l-3.53 2.608c-.802.593-1.326 1.464-1.475 2.45-.15.99.097 1.975.69 2.778.498.675 1.187 1.15 1.992 1.377.4.114.633.528.52.928-.092.33-.394.547-.722.547z"></path>
<path d="M7.27 22.054c-1.61 0-3.197-.735-4.225-2.125-.832-1.127-1.176-2.51-.968-3.894s.943-2.605 2.07-3.438l1.478-1.094c.334-.245.805-.175 1.05.158s.177.804-.157 1.05l-1.48 1.095c-.803.593-1.326 1.464-1.475 2.45-.148.99.097 1.975.69 2.778 1.225 1.657 3.57 2.01 5.23.785l3.528-2.608c1.658-1.225 2.01-3.57.785-5.23-.498-.674-1.187-1.15-1.992-1.376-.4-.113-.633-.527-.52-.927.112-.4.528-.63.926-.522 1.13.318 2.096.986 2.794 1.932 1.717 2.324 1.224 5.612-1.1 7.33l-3.53 2.608c-.933.693-2.023 1.026-3.105 1.026z"></path>
</g>
</svg>
<span class="css-901oao css-16my406 css-bfa6kz r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">
<span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">Visit thenationalnews.com</span>
</span>
</div>
</div>
</div>
</div>
You're looking in the wrong place. It's not a code thing, but a Twitter user options thing.
Solution:
You need to be logged in to Twitter then go to https://ads.twitter.com/ and from there create a new Twitter Video Card. After filling the boxes (title, description, and your site link) you can then click to post as a status tweet on your page. The video will now have your website link on hover.
PS: Some Youtube tutorials you can check about this topic:
(1) Watch from time 0:50 onwards:
https://www.youtube.com/watch?v=X-OKFAnkyBQ
(2) At time 3:20 they show you how to add the website URL (the link shown on hover):
https://www.youtube.com/watch?v=OBJA9MYI7tk