Responsive DropDown Button with Iframe

[arnlweb]

Add CSS:

Code: Select all

<style>@media screen and (min-width: 651px) {#myframe{height:100px!important;}}@media (min-width: 400px) and (max-width: 650px) {#myframe{height:200px!important;}}@media (min-width: 200px) and (max-width: 399px) {#myframe{height:300px!important;}}
</style>

Html Code:

Code: Select all

<button class="button-mp3-hd" type="button" id="download_button_show">Download Mp3 (HD)</button>
<div id="download_show" class="button_show" style="display: none;">
<iframe class="button-api-frame" id="myframe" src="https://youtubetoany.com/@api/button/mp3/FITSPSA8gQs" width="100%" height="100%" allowtransparency="true" scrolling="no" style="border:none"></iframe>
</div>

<button class="button-mp3-hd" type="button" id="download_button_show2">Download Mp4 (HD)</button>
<div id="download_show2" class="button_show2" style="display: none;">
<iframe class="button-api-frame" id="myframe" src="https://youtubetoany.com/@api/button/videos/snDrySinajI" width="100%" height="100%" allowtransparency="true" scrolling="no" style="border:none"></iframe>
</div>

JavaScript Code:

Code: Select all

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $('#download_button_show').click(function() {
            $('#download_show').toggle('slow');
          });
		  
		  $('#download_button_show2').click(function() {
            $('#download_show2').toggle('slow2');
          });
      });
</script>