So, basically on my website I have multiple streams and I use jquery tabs to have them all on the same page. I embed the twitch channels from their website. Now it's a bit of a mess because it's a lot of code for basically the same embed with just a different channel name, like this:
<div class="embedly-responsive" style="position: relative;padding-bottom: 75.0000%;height: 0;overflow: hidden;">
<iframe class="embedly-embed" frameborder="0" scrolling="no" allowfullscreen src="//cdn.embedly.com/widgets/media.html?src=%2F%2Fwww-cdn.jtvnw.net%2Fswflibs%2FTwitchPlayer.swff%3Fchannel%3Dcoinlives&fv=hostname%3Dwww.twitch.tv%26start_volume%3D25%26channel%3Dcoinlive%26auto_play%3Dfalse&url=http%3A%2F%2Fwww.twitch.tv%2Fcoinlive&image=http%3A%2F%2Fstatic-cdn.jtvnw.net%2Fjtv_user_pictures%2Fcoinlive-profile_image-7c29302b755258bf-600x600.png&key=0e95bd24acbf43b38a5a3a5558035397&type=application%2Fx-shockwave-flash&schema=twitch" width="400" height="300" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></iframe>
</div>
I used this approach because I don't quite understand how their API works, IDK how to use JSON. Can someone explain to me how I would make this code easier?
Related
I'm unsure as to why my embedded websites are all refusing to connect when I load a webpage I get this error "www.exaplesite.com refused to connect." if anyone could help me to fix this error it would be much appreciated.
My Code:
<div id="Container"
style="padding-bottom:56.25%; position:relative; display:block; width: 100%;">
<iframe id="ViostreamIframe" width="100%" height="1000px" src="https://www.example.com/" frameborder="0" allowfullscreen="" style="position:absolute; left: 0; margin-top: 3.4%"></iframe>
</div>
You cannot fix this from Power Apps Portal side. Most probably web site that you try to embed as an iframe doesn't allow to be embedded. You need to update X-Frame-Options on the website that you are trying to embed to allow your Power Apps Portal (if you have control over that website). You can find more Here
I was fascinated by background videos that we see in webpages like https://www.laitkor.com/ , I wanted to develop something similar, but this time I to get the video from Youtube. How can I do it?
P.S. The video should play automatically.
This is how to embed a YouTube video as a webpage background:
<div style="position: fixed; width: 100%; height: 100%; z-index: -999;">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/[videoID]?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
I am a beginner here so please ELI5.
I am trying to upload photos and have a set size for when they display. The photos will more than likely be larger than the settings - which makes me think this is possible. I have tried CSS and the width works, but the height does not. I have given the images their own class and have only been using CSS. This is what I have tried:
.img-list{
max-height: 175px;
max-width: 263px;
}
I have also tried
.img-list{
max-height: 100%
max-width: 100%
}
I feel like I could put something in the .php files of the theme, but I am not sure where.
With my CSS, the image will resize, but only to the width and the height will not stretch. I understand that the images will stretch and not look like the originals, but the images are going to be small in size and little detail so the stretch would not be significant (I believe). I know this has to be possible. I have been scouting the internet and see others talking about it. A lot of the other threads mention HTML. I don't know where I would put the HTML. When I put the HTML in the image itself it doesn't change anything. The CSS still takes over and does not properly work. This is the HTML I have tried.
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="image name" width="512" height="512" /></span></p>
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="img name" width="100%" height="100%" /></span></p>
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="image name" width="300" height="200" /></span></p>
All HTML codes result in the same image - CSS is active. This leads me to believe I need to put some HTML in my .php files... but where and what would it be?
All help is appreciated!
I am using an iFrame to show google-map, but it is not working.
If I paste the URL into the browser, then it is showing the exact location.
I don't know why it is not working.
My HTML code:
<div><iframe src="<?php echo $uni['GoogleMapLink'];?>" width="97%" height="50%" frameborder="0" style="border:1px solid #ccc;"></iframe></div>
<?php echo $uni['GoogleMapLink'];?> is https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870b
The output in the browser is:
<div><iframe src="https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870bcf7bed14f49:0x783aa84ea9692f19" width="97%" height="50%" frameborder="0" style="border:1px solid #ccc;"></iframe></div>
You are not allowed to display that URL in an iframe. If I create a fiddle containing your code:
<div><iframe src="https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870b" width="97%" height="50%" frameborder="0" style="border:1px solid #ccc;"></iframe></div>
and look in the javascript console, I see:
Refused to display 'https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870b' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
You should look at the Embed API or use Google's tools to create a map you can put on your page.
I have used iframe for view multiple image with in the frame and I want to hide the Horizontal Scroll Bar. I Have used following code snippet.
<div class="framepart">
<iframe src="http://docs.google.com/gview?url=http://www.puthuvannam.com/vendors/sample/documents/<?php echo $res['name'];?>&embedded=true" style="width:600px; height:500px;overflow-y:hidden;" scrolling="no" style="overflow:hidden" frameborder="0">
</iframe>
</div>
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.
However the <iframe> scrolling attribute is not supported in HTML5, even though most browsers understand it.
See this article to learn more on scrolling.
I think I found the problem.
I changed the src of the <iframe> to http://docs.google.com/gview?url=http://www.google.com/&embedded=true (http://jsfiddle.net/U8JCj/2/).
By inspecting this in Developer Tools, it can be seen that it is not the <iframe> that has an overflow, but the inner <div id="content-pane"> which has overflow: auto. As this is internal to Google Docs, it is not a style you can change, and therefore there is no solution to this (while using Google Docs).