modifier la taille d'une vidéo youtube intégrée par ArmandDuchatel - page 1

Bonjour à tous,

je tente de modifier la taille de ma vidéo youtube intégrée sur ma page html mais le bloc reste de la même taille,

j'arrive à modifier en inline sur le html comme ci-contre :

mais en CSS je foire total.

ici mon html :

<!DOCTYPE html>
    
<html>
    
<head>
    
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="aboutUs.css">
    
    <title itemprop="title"> About us - La tannerie Cuir Précieux </title>

    <meta itemprop="datePublished" content="2018-03-17" id="date">
    <meta itemprop="author" content="DIAGATHE Josué" id="author">
    <meta itemprop="genre" content="portfolio">

</head>




    <body>
        
    
        
            <div itemscope itemprop="menu"id="menu">
               
                    <span id="menuBar">  
                     
                      
                           <span class="menuSpace" > Magasin </span>
                           
                           <span class="menuSpace"> Contactez-nous </span>
                           
                           <span class="menuSpace"> Catalogue </span>
                           
                           <span class="menuSpace"> About us</span>
                  
                   
                    </span>
           
            </div>
    
    
    
    
    
            <div class="aboutUsVideo" >
                
                
                    <iframe id="aboutUsVideo" src="https://www.youtube.com/embed/nMgSSvbKVz4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                
                
            </div>
    
    
    
    

    </body>
    
    
    
       <footer class="footerContainer ">
        

            
                <div id="firstLineFooter" class="inlineBlock" >
                    
                    <span class="firstLineFooterText"> Service client </span>
                    
                    <span  class="firstLineFooterText">  About us  </span>
                    
                    <span  class="firstLineFooterText"> Location </span>
                    
                </div>
                
                
               <div class="inlineBlock faq">
                
                
                <span id="faqElement">
                        
                        FAQ
                
                </span>
               
               
               </div>
               
               
                
            <div  class="inlineBlock bottomRight"> 
               
                    
                    <div class="inlineBlock" id="socialMedias">
                     
                      <img id="googlePlus" class="socialIcons" src="../../icons/googlePlus.svg">
                      
                      <img id="googlePlus" class="socialIcons" src="../../icons/facebook.svg">
                      
                      <img id="googlePlus" class="socialIcons" src="../../icons/twitter.svg">
                      
                      
                    </div>
                     
                    
                    
                    <div class="inlineBlock" id="newsletter">
                         
                         Newsletter
                         
                         
                    </div>
                     
                     
            </div>
               
               
        
         
        
    </footer>
    
    
    
    
    
    <footer class="footerContainer ">
        

           
    </footer>
    
</html>

ici mon CSS :

@font-face{
    font-family: "minimal";
    src: url('../../fonts/minimal-webfont.ttf');
}

@font-face{
    font-family: "hirondelleDemo";
    src: url('../../fonts/hirondelle-demo-webfont.woff');
}


@font-face{
    font-family: "celticGaramond";
    src: url('../../fonts/celtg__-webfont.ttf');
}




html, body {
    
    
    margin: 0;
    padding: 0;
    
    
    background-image : url('../../backgrounds/leatherBackground.jpg');
	background-attachment: fixed;
    background-size: cover;
     
    color: #F9EEBF;
     
}


.inlineBlock {
   
   display : inline-block ;
  margin : 0 ;
  padding : 0 ; 
   
}


#menuBar {
    
    display: inline-block; 
    background-color : rgba(126,62,28,0.25);
    text-align : center ;
    width : 100% ; 
    
}

.menuSpace {
    
    margin : 2.5% ; 
    
}

.aboutUsVideo {
    
    
    margin : auto; 
    margin-top : 12.5% ;
    
    margin-bottom : 12.5%;
    
    text-align : center;
    width : 85% ;
    
    height : 185% ;
    
    

    
    
    
}

iframeiframe #aboutUsVideo {
  
  
  height : 100% ; 
  
  
}






/********* FOOTER  *********/



footer {
    
   background-color:  rgb(32,32,32) ;

  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin : 0 ;
  
  height : 35% ;
      
    font-family: minimal ;
    font-size : 155% ;
    font-weight: 200;
    
    
    padding-bottom: 3%;
}



#firstLineFooter {
    
    display : inline-block ;
    text-align : center ; 
    width : 100%; 
    font-size : 155% ;
    margin-bottom: 5%;
    
}



#firstLineFooter {
    
    margin-top : 1.5%; 
    
}


#faq {
  

  
}


#faqElement {
    
    font-size :  155% ;
    padding-left : 5%;
    grid-area: faq/ faq;
    display : inline-block ;
    margin-left : 75%;
    
}

.bottomRight {
    
    grid-area : socialmedia1 / socialmedia2 / socialmedia2 ;
    width : 100%; 
    font-family: minimal ;
    font-size : 205% ;
    font-weight: 200;
    display : inline  ;
    padding-left : 35%;
    margin-bottom: 30% ;
    bottom : 1em ;
    
}




.socialIcons {
   
   
   width : 10% ;
      display : inline-block ; 
   margin : auto  ;
}


 #newsletter  {
   
     display : inline-block ;
     padding-left : 5% ;
     margin : 0;
}

si vous avez des conseils ce serait avec plaisir,

bien à vous,

Armand

-
Edité par ArmandDuchatel 18 mars 2018 à 8:53:43

modifier la taille d'une vidéo youtube intégrée

modifier la taille d'une vidéo youtube intégrée

Supprimer

Modérer

Signaler le message aux modérateurs