EMBED THINQ.TV ON YOUR WEBSITE
Do you own a blog or website of your own? Are you interested in referring people to our STEMinist community? If so, you can include part of our website on your page by embedding it! Once it has been included, the embedded widget will update on its own as we make changes to our site. No maintenance will be required on your end.
Instructions:To embed Thinq.tv onto your own website, simply copy the HTML code below and insert it into your webpage's HTML document!
<iframe src="https://thinq.tv/embed" title="ThinQ.tv: Join in with tech industry tips!" height=400px width=600px style="border: 10px solid #FEC427;"></iframe>
Additional Formatting Options
Are you interested in adjusting the way our embedded widget looks on your site? If so, you can edit the formatting properties included in the HTML code above in order to achieve a variety of effects.
- Widget Size
The default height and width of the widget is 400 pixels by 600 pixels, and is specified using the "height" and "width" attributes.
Rather than expressing the dimensions of the widget by length, you can also express them as a proportion of the size of the container it's placed in. For example,
height=100% width=25%will set it to be as tall as the container it's in, but only 1/4 as wide.
You can also set it proportional to the size of the browser viewport! The "vh" unit is 1% of its height, while the "vw" unit is 1% of its width.
Here is a diagram with these units being used to define width:
The border property is used to place a border around the widget's content. The three values following "border:" in the code represent its width, style, and color respectively. To see more information on styling borders, click here.
By default, the widget will be positioned according to the other HTML elements in your webpage depending on where in your code you place it.
In order to get it to stay fixed in a certain position on the user's screen as they scroll through your webpage, add "
position: fixed; z-index: 99;" to the "style" attribute of the widget. By default, a fixed-position element will appear in the top-left of the screen, but you can set the location of a fixed-position element by using the top, bottom, left, and right properties. The length specified will determine how far from the edge in question that the widget appears. For example,
style="border: 10px solid #FEC427; position: fixed; z-index: 99; bottom: 0; right: 0;"will set it to appear in the bottom-right corner of the screen.
One method of getting your HTML element to position itself outside of the normal page flow, but to still maintain its position relative to the other elements on your page is by using "
position: absolute;" in the element's "style" attribute. It will be positioned relative to its most closely-related ancestor which isn't statically-positioned. In the same way as a fixed-position element, you can adjust its positioning using the top, bottom, left, and right properties.