Iframe hiding and no solution works

Question

I making my own film-webspace on my pc and there I have to buttons to show a the cover of the film and one to hide the cover and show the iframe but that doesnt work. Here my code:

My php Code for the cover and iframe:

    echo '<div class="BildTrailerButton">';
               echo '<button name="Bild" id="Bildbutton" value="Cover" onClick="bild()">'."Cover".'</button>';
               echo '<button name="Trailer" id="Trailerbutton" value="Trailer" onClick="trailer()">'."Trailer".'</button>';
               echo '</div>';


               echo '<img src="'.$titel['Bilderlink'].'" title="'.$titel['FTitel'].'" class="Filmbilder" id="Bild">';

               echo '<div class="videoDiv" id="playerDiv">';
               echo '<iframe width="560" height="400" src="'.$titel['Trailerlink'].'" frameborder="0" id="player" allowfullscreen>';
               echo '</iframe>';

               echo '</div>';

and here the code of the javascript:

    <script type="text/javascript" defer>

        document.getElementById("player").style.visibility="hidden";

        function trailer(){             
                document.getElementById("Bild").style.visibility="hidden";
                document.getElementById("player").style.visibility="visible";

        }  

        function bild(){
                document.getElementById("player").style.visibility="hidden";
                document.getElementById("Bild").style.visibility="visible";        
        }


    </script>

The firebug console gives this error:

    TypeError: document.getElementById(...) is null
document.getElementById("player").style.visibility="hidden";

Answer 1

Hide iframe with:

document.getElementById("player").style.display = 'none';

Answer 2

Thank you to everyone especially Plenka. I made it :) Here my new code:

The Javascript:

     <script type="text/javascript" defer>



        function trailer(){             
                document.getElementById("Bild").style.visibility="hidden";
                document.getElementById("playerDiv").style.visibility="visible";

        }  

        function bild(){
                document.getElementById("playerDiv").style.visibility="hidden";
                document.getElementById("Bild").style.visibility="visible";        
        }


    </script>

And the html/php code:

    echo '<div class="BildTrailerButton">';
               echo '<button name="Bild" id="Bildbutton" value="Cover" onClick="bild()">'."Cover".'</button>';
               echo '<button name="Trailer" id="Trailerbutton" value="Trailer" onClick="trailer()">'."Trailer".'</button>';
               echo '</div>';


               echo '<img src="'.$titel['Bilderlink'].'" title="'.$titel['FTitel'].'" class="Filmbilder" id="Bild">';

               echo '<div class="videoDiv" id="playerDiv">';
               echo '<object width="560" height="315">'
                   .'<param name="movie" value="'.$titel['Trailerlink'].'"></param>'
                   .'<param name="allowFullScreen" value="true"></param>'
                   .'<param name="allowscriptaccess" value="always"></param>'
                   .'<embed src="'.$titel['Trailerlink'].'" type="application/x-shockwave-flash" width="560" height="400" allowscriptaccess="always" allowfullscreen="true"></embed>'
                   .'</object>';      
               echo '</div>';
           }