How can I do that? I found this and this, saying that raw HTML should be supported. However, I tried this, which does not work:
.. raw:: html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
<iframe src="https://www.youtube.com/embed/zIFMyBkYwqg" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
This is a related question for readme markdown (md) files. For markdown, raw HTML or video support seems not supported, so they embed just an image with a link to the video. If a video is not possible, then I would like to do the same, but also then, the question is how.
Here is in reStructuredText the code for embedding an image with a link to the YouTube video.
.. image:: https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/maxresdefault.jpg
:alt: IMAGE ALT TEXT HERE
:target: https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE
Related
Consider the following example: (live demo)
HTML:
<div>div</div>
<iframe></iframe>
CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Result:
Why the iframe is not centrally aligned like the div? How could I centrally align it?
Add display:block; to your iframe css.
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>
best way and more simple to center an iframe on your webpage is :
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
where width and height will be the size of your iframe in your html page.
HTML:
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>
CSS:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
The simplest code to align the iframe element:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
My simplest solution to this.
iframe {
margin:auto;
display:block;
}
If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video
Depending on the video source and if you want to have old videos become responsive your tactics will need to change.
If this is your first video, here is a simple solution:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
And add this css:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Disclaimer: none of this is my code, but I've tested it and was happy with the results.
You can put iframe inside a <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
You can try
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
I hope its useful for you
link
If you can't access the iFrame class then add below css to wrapper div.
<div style="display: flex; justify-content: center;">
<iframe></iframe>
</div>
In my case solution was on iframe class adding:
display: block;
margin-right: auto;
margin-left: auto;
According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
margin-left: auto;margin-right: auto;
Here I have put snippet for all of you who are suffering to make iframe or image in center of the screen horizontally.
Give me THUMBS UP VOTE if you like.👍⯅.
style > img & iframe > this is your tag name so change that if you're want any other tag in center
<html >
<head>
<style type=text/css>
div{}
img{
margin: 0 auto;
display:block;
}
iframe{
margin: 0 auto;
display:block;
}
</style>
</head>
<body >
<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180" />
</body>
</html>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
use it and embed facebook in iframe in center of html page
I am generating QR code using google chart api, How can I insert image inside Image.
What I get QR code as for now,
enter image description here
What I want QR code,
enter image description here
can someone help for me to solve this problem.
Warning: This API is deprecated. Please use the actively maintained Google Charts API instead. See our deprecation policy for details
You pass your QR payload to the API endpoint and get an image in return:
https://quickchart.io/qr?text=Hello world
or
Another alternative is Image-Charts
(highly reliable, deployed in data-centers around the world, sub-second response time)
https://documentation.image-charts.com/qr-codes/
Unfortunately, with my understanding, Chart API doesn't have such a function.
But you can use Image-Overlay by using CSS.
Like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.qrcode
{
position: relative;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.shell
{
position: absolute;
top: 80px;
left: 80px;
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img class="qrcode" src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world&choe=UTF-8" alt="QR code" />
<img class="shell" src="YOUR IMAGE'S URL" />
</div>
</body>
</html>
You can see my sample page here.
Though, note that Chart's QRcode API has already been deprecated.
I have worked and searched on finding a solution to this iPhone issue for almost a week. I need some help please. I have never done any programming for a smart phone. This is a first. This web page works great on all browsers but not on smart phones. Can you give me some advice on how to fix it or convert it?
I want to update this page so that it works on the iPhone\androdes devices. http://www.westernagencyinc.com/contact_us.html. I have a test page setup http://www.westernagencyinc.com/test.html to work on it and not effect the real page.
The way the "Contact Us" page\map works is it has an map in its top and another html file called location_info.html embeded in an IFRAME below it. The location_info.html file is a list of location with each having a unique anchor name for a city\pin on the map.
The map has pins on each city that are clickable areas with its target being the IFrame and the code look like this:
You can see that When you press on a button/pin on the map a variable anchor is set for that pin (city name) which matches one of the anchors in the location_info.html and that is sent to the IFrame html file so it will move\scroll to the correct location.
The IFRAME that holds the location currently has no scroll bars on it.
<area shape="rect" coords="145,-6,200,48" href="locations_infotest.html#kenmare" alt="Kenmare" target="location_content">
<div id="apDiv10" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;" >
<iframe scrolling="no" name="location_content" src="locations_infotest.html" width="625" height="190"></iframe>
</dov>
#apDiv8
{
position: absolute;
left: 30px;
top: 255px;
width: 627px;
height: 18px;
z-index: 8;
text-align: left;
}
#apDiv9
{
position: absolute;
left: 30px;
top: 20px;
width: 625px;
height: 409px;
z-index: 9;
text-align: left;
}
#apDiv10
{
position: absolute;
left: 30px;
top: 448px;
width: 625px;
height: 190px;
z-index: 10;
text-align: left;
}
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
On the GWT developer site there is an example showing a panel that is in the middle of a page. Is this possible to have a fixed with panel in the middle of a page using the GWT layoutpanels?
http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels
There's a good old CSS trick for centering fixed-size, absolute boxes, using automatic CSS layouting (no JavaScript required):
First center the top left corner of the box by using top: 50%; left: 50%;
Of course, the box will be too far to the bottom/right now.
Then subtract half of the box's height/width by using margins. (It's fixed-size, so you can calculate "half of the height/width" with pen and paper :-)
Example:
<!doctype html>
<html>
<head>
<style type="text/css">
.box {
position: absolute;
background-color: red;
height: 300px; width: 400px; /* Using "px" here, but you */
/* can also use "em" etc. */
top: 50%; left: 50%;
margin-top: -150px; margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>
Apply this style to your LayoutPanel - I don't have a full code example for that, but I think it should be possible.
You can achieve the effect with simple css. For example:
<html><head>
<style>
.outer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: blue;
}
.inner {
position: absolute;
top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>
Once the basic effect is created in plain CSS using absolutely-positioned objects, you can recreate it with the LayoutPanels, since they're essentially a CSS constraint system.
I don't think you can make a fixed-width layer center itself automatically in a LayoutPanel. However, you can insert the layer into the DOM to get its size, and then calculate the proper offsets yourself. You can see how Google does this (not in a LayoutPanel) in the code for DialogBox.center();