CODEWITHSUNDEEP
htmlcssyoutube
gsiradze
gsiradze

Reputation: 4733

youtube video full on section

I have youtube video link

<iframe width="100%" height="100%" src="//www.youtube.com/embed/zuQGx1H1Qh8?autoplay=1"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>

and I want to make it fullscreen of my section tag. I have added width:100% height:100% but result is: enter image description here

other I have tried

bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 100;

but same result. Any idea how i can solve that?

JSFIDDLE

Upvotes: 0

Views: 49

Answers (2)

user3297426
user3297426

Reputation:

remove padding: 60px; and padding-left: 120px; from your section tag and It's solved

Upvotes: 1

secelite
secelite

Reputation: 1373

Solution #1

Remove the padding : http://jsfiddle.net/mwykdrn3/1/

section {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Solution #2

Use absolute positioning http://jsfiddle.net/mwykdrn3/2/

#yvideo {
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Upvotes: 0

Related Questions