I've embedded three YouTube videos onto a page, but I've wrapped them with a DIV and a CLASS called "videoplayer", but the DIV and the CLASS seem to be ignored because they don't display in the page.
You can see it here: http://72.4.166.89/en/tutorial.asp
Here's the CSS being used:
.videoplayer {
border: 1px solid #1D740C;
height: 384px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;
}
I've looked with most of my tools and I don't see the DIV or the CLASS having been used at all, but they are there.
Has anyone else run into this, or is this not allowed?
Instead of creating the div to surround the player and adding a class to the div, why not just use the built in class of the player youtube-player to apply your styling:
.youtube-player{
border: 1px solid #1D740C;
height: 390px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;
}
Working example on jsfiddle: http://jsfiddle.net/Damien_at_SF/guSAC/1/
This by-passes the need to have a parent div and also the problem that you have above :)
hope that helps :)
The div with class "videoplayer" is on your page but will not do anything extraordinary if you do not apply any css style information. If you want to see the div, add a background color or border etc. eg.
div.videoplayer {
background:black;
border:2px solid red;
padding:10px;
}
...or something to that effect.
You're div is there, you just can't see it in the browser without some help. What tools did you use? Try firebug, it took me literally 3 seconds to find it with the search feature.
or is this not allowed?
Its most definitely allowed. Having an object tag inside a div is perfectly fine.
I have found out you are missing closing tab for (at least) one of your divs
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/icAFUlsysqg?rel=0" frameborder="0"></iframe>
<!-- you see, there is no closing </div> tag, so put it here -->
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/WC0E9jHw1B8?rel=0" frameborder="0"></iframe>
</div>
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/ayJbo1-ReBc?rel=0" frameborder="0"></iframe>
</div>
And also, you should define some CSS for this class :)
Related
I want the facebook iframe embed to sit at the left of the text. Not sure how to do that using CSS or something. Can someone help? It currently seems like the embed is inline with the text and sits on the left hand side. I want it to continue to sit on the left but I want to have the text next to it starting at the same height. I also want it to center itself in the margin on the left of the text.
<template>
<div>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAirCombatGroup%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" align="center" width="50%" height="500" style="border:none;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<div class="headerHome">
<h1>Welcome to the Air Combat Group</h1>
</div>
<div class="homeText">
<p>
The Air Combat Group consists of both Allied and Axis squadrons under a single operational umbrella flying with full realism settings. We are an English and German speaking group located in Europe, the Americas and Australia and meet on our own Teamspeak 3 and Discord servers.
</p>
</div>
</div>
</template>
<script>
SNIP
</script>
<style scoped>
.homeText{
width: 50%;
text-align: justify;
margin-left: auto;
margin-right: auto;
}
.headerHome{
width: 50%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
You could choose to use the CSS property 'position: fixed;'. This allows you to position the element anywhere, but it will remain at that exact position.
Start off with giving the Facebook iframe an ID, you can simply add the ID-attribute like this:
<iframe id="facebook_box" ... ></iframe>
Then add the CSS rules within the <style>-element. You can also tell the element to be positioned off the top and left (or bottom and right, etc). The code will look like this
#facebook_box {
top: 20px;
left: 20px;
position: fixed;
display: inline-block;
}
I hope this helps you on your way.
I need to embed a YouTube video into my responsive site but it's not scaling correctly, especially on mobile.
It looks fine on desktop and tablets but once you get below a viewport width of 600, the video breaks its container. To view the whole video on mobile you need to pinch out to a point that the rest of the content only fills about 1/2 the screen vertically. Not so good.
I want the text content to be 1/3 wide and the video to be 2/3 wide on desktop and tablets and stacked on mobile with the video and content both 100% of the viewport width. I've tried using width="100%" on the iframe but then the height doesn't scale correctly as you resize and the video either gets stretched or squished.
I also need to do it with CSS only as i'm simply laying my stylesheets over stock bootstrap 3.0.
Here's my code:
<div class="container">
<div class="row">
<div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
<div class="col-sm-8">
<iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a Bootstrap3 native solution:
http://getbootstrap.com/components/#responsive-embed
since Bootstrap 3.2.0!
If you are using Bootstrap < v3.2.0 so look into "responsive-embed.less" file of v3.2.0 - possibly you can use/copy this code in your case (it works for me in v3.1.1).
I know it's late, I have the same issue with an old custom theme, just added to boostrap.css:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
And for the video:
<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>
Have a think about wrapping the videos inside something which you can make flexible via bootsrap.
The bootstrap is not a magic tool, its just a layout engine. You almost have it in your example.
Just use the grid provided by bootstrap and remove strict sizing's on the iframe. Use the bootstrap class guides for the grid..
For example:
<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
You will see how the class of the iframe will change then given your resolution.
A Fiddel too : http://jsfiddle.net/RsSAT/
Well it has a simple and easy solution. You can make your video easily to fit for any device and screen size.
Here is the HTML and CSS code:
.yt-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.yt-container iframe, .yt-container object, .yt-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="yt-container">
<iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>
Source: https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
It also depend on how you style your site with bootstrap.
In my example, I am using col-md-12 for my video div, and add class col-sm-12 for the iframe, so when resize to smaller screen, the video will not view squeezed.
I add also height to the iframe:
<div class="col-md-12">
<iframe class="col-sm-12" height="333" frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>
I use bootstrap 3.x as well and the following code fore responsive youtube video embedding works like charm for me:
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
I gave a similiar answer on another thread (Shrink a YouTube video to responsive width), but I guess my answers can help here as well.
This works fine for me...
.delimitador{
width:100%;
margin:auto;
}
.contenedor{
height:0px;
width:100%;
/*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */
padding-top:56.25%; /* Relación: 16/9 = 56.25% */
position:relative;
}
iframe{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}
and then
<div class="delimitador">
<div class="contenedor">
// youtube code
</div>
</div>
I can't figure out why the facebook buttons are mis-aligned at the top of the following page
http://wishd.me/chovy/lists/507f8817a51102a137000001
<div class="social">
Tweet
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>
The facebook buttons are a little lower than the twitter button.
if you'll inspect the dom, you see twitter iframe has a height of 20px and the fb div is 27px height.
the are several ways to handle this. I don't like the both post above, because the .social .iframe rule also move the fb iframe 4px down. the other one is to messy for my opinion.
you can do:
.social > iframe { display: inline-block; position: relative; top: 4px; }
all solutions are not the prettiest...
try
<div style="float:left ;margin-right:5px;margin-top:4px">
<iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1350635993430&count=none&id=twitter-widget-0&lang=en&original_referer=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001&size=m&text=chovy's%20wishlist%20%C2%BB%20Movies%20-%20Wishd.me&url=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001" class="twitter-share-button twitter-count-none" style="width: 58px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
</div>
result
.social iframe {
position: relative;
top: 4px;
}
Twitter iframe moves little lower and all aligned well.
p.s. Your .social styles located in style.css line 445.
I have some paragraphs inside a div and some of the words are wrapped in anchor tags.
The paragraphs use white-space: nowrap, which causes them to overflow out of the div's boundaries (which is what I intend to do). Problem is, the overflow is visible but anchors are not clickable.
This is probably by design, but still, does anyone know of a way to make the overflowing anchors clickable?
Thanks in advance!
It's because of your div#rightBox - it contains another div inside of it, which is like this: <div class="verticalPlaceholder"></div>. To fix this, instead of using a vertical placeholder like this, change the HTML and CSS like so:
HTML
<div class="rightBox" id="rightBox">
<div class="facebookLike" id="like">
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:100px; height:20px;" src="http://www.facebook.com/plugins/like.php?app_id=174634935928464&href=http%3A%2F%2Fgreat-passage.com%2F%3FphotoId%3D113&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=dark&font=arial&height=20"></iframe>
</div>
<!-- Deleted verticalPlaceholder div -->
</div>
CSS
div.facebookLike {
bottom: 75px; /* ADDED */
display: block;
margin: 6px 0 0;
opacity: 0.5;
position: relative; /* ADDED */
}
Adding a border to an IFrame is no biggie - you do it like this e.g.:
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
The problem is that when you load content to that IFrame, the content overlaps the borders in the corners, like so:
Any ideas how one might get past this issue? E.g. is there a JavaScript library that would take care of this...
Put the iframe in a wrapper element and give the wrapping element this CSS property:
transform: translateY(0px);
.corner-wrapper {
display: block;
overflow: hidden;
width: 300px;
height: 150px;
border-radius: 10px;
transform: translateZ(0px);
border: 3px solid #eee;
}
<div class="corner-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d77935.71780117304!2d9.691260439866745!3d52.37964560033004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b00b514d494f85%3A0x425ac6d94ac4720!2sHannover!5e0!3m2!1sde!2sde!4v1458445807305" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
You can also do it like this:
<div style="padding:10px;background:#000;webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;width:560px;margin:0 auto;overflow:hidden;">
<iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
</div>
I have also included all the youtube options in the above example:
1: autoplay=1 (0/1 | automatic play movie)
2: loop=1 ( 0/1 looping on/off )
3: rel=0 ( hide related movies after movie ending, this does not always work)
4: border=0 (removes youtube border)
5: modestbranding=1 (removes youtube logo)
Use this property:
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
Good luck!
I know this is a rather old thread, but I found a valid work around for it that the others didn't cover.
What you're seeing is a z-indexing issue. All you need to do is put your iFrame into a DIV, and set the DIV's and iframe's position to absolute. Then set your z-index in CSS. It works great with Youtube videos in bubbles!
<style>
#player-wrapper{
border-radius:50%;
border:solid 1px #999;
width:360px;
height:360px;
overflow:hidden;
position:absolute;
left:50%;
top:90px;
margin-left:-130px;
z-index:10;
}
#player-wrapper iframe{
position:absolute;
left:50%;
margin-left:-320px;
z-index:9;
}
</style>
<div id="player-wrapper">
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/rTMMraosnzg></iframe>
</div>
You could use the Malsap jQuery rouned corner plugin. It won't fix the actual problem, but it will give you the rounded corners without the issue.
Adding css property overflow: hidden; to parent element of iframe work fine!
Like so:
<html>
<body>
<div style="border-radius:10px;overflow: hidden;width: fit-content;display: flex;height: fit-content;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div/>
</body>
</html>
The box-shadow will round corners. Just have a spread-distance of the thickness of your border and a blur value of 0. This is a hack, but what isn't in HTML?
box-shadow: 0 0 0 1px #000;
Will add a 1 pixel border. The first two zeros are the offset. The third zero is how much blur you want to give to the shadow (none). The 1px is how far "out" you want the shadow to go. The last parameter is the color of the border. Most people omit the spread because they want their shadows to be the same size as the element.
Here is an example where I did this, which works in at least IE9 and Chrome 17: http://www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/
In case you haven't figured this out yet, try this...works for me:
I have noticed that if you try to do this externall even to the tag, it doesn't work. Set style within the iframe tag.
Good Luck!
Working solution: (2019)
this allows you to apply any additional css you want, keep the iframe dynamic, and still interact with the iframe.
add this javascript (or jquery) function to your page:
pure javascript solution:
function setIframeBorder(){
let iframeBorder = document.getElementsByTagName('iframe-border');
for(let i = 0; i < iframeBorder.length; i++){
let iframe = iframeBorder[i].getElementsByTagName('iframe')[0];
let width = iframeBorder[i].getAttribute('width'); let height = iframeBorder[i].getAttribute('height');
if(width){iframeBorder[i].style['width'] = width;} if(height){iframeBorder[i].style['height'] = height;}
iframe.style['width'] = '100%'; iframe.style['height'] = '100%';
iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';
iframe.style['position'] = 'relative'; iframe.style['margin'] = '0';
}
}
setInterval(setIframeBorder, 10);
jquery solution:
function setIframeBorderJquery(){
$('iframe-border').each(function(){
$(this).css({'overflow': 'hidden', 'display': 'inline-block', 'width': $(this).attr('width'), 'height': $(this).attr('height')});
$('iframe', this).css({'position': 'relative', 'margin': '0', 'width': '100%', 'height': '100%'});
});
}
setInterval(setIframeBorderJquery, 10);
css: (optional)
iframe-border{
border-radius: 20px;
}
usage:
<iframe-border width="560" height="315">
<iframe src="https://www.youtube-nocookie.com/embed/ESjRtD0VoRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</iframe-border>
You miss overflow and position properties. This should work:
border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
position: relative;