This html and css code can be used for
making an iframe responsive, both width and height, that works in modern browser; in desktop and mobile devices.
- HTML:
<div class="youtube">
<iframe src="https://www.youtube.com/embed/x1USgMp9__s?autoplay=0"></iframe>
</div>
- CSS:
.youtube {
margin:8px auto 5px auto;
position:relative;
padding-bottom:12%;
padding-top:100px;
height:0;
overflow: auto;
-webkit-overflow-scrolling:touch;
text-align:center;
width:99%;
max-width:600px;
min-width:300px;
min-height:205px;
}
.youtube iframe {
border:0;
display:block;
margin:0 auto;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
max-height:420px;
min-height:200px;
}
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net