CSS Media Queries with min-width and max-width Syntax

Let us look at how we write Media Queries with min-width and max-width . we know that Media queries are a popular  Technic for styling based on the screen size .here we are going to discuss the syntax of Media Queries with min-width and max-width

We have standard for max-width and min-width

@media only screen and (max-width : 1600px) {

.title-cl h4{ font-size:28px; }

}

@media only screen and (min-width : 578px) {

.title-cl h4{ font-size:16px; }

}

 

So how we are adding both  with min-width and max-width Media Queries

 

@media screen and (max-width: 1024px) and (min-width: 578px) {

.title-cl h4{ font-size:22px; }

}

How to display all videos in a websites from YouTube channel

Google is just not a search engine, it is developers god,Whenever developer as an issue ,their is always a solution with google.So handling their product like you tube, maps etc  are so easy .They have their Own API ,by using this api they we can integrate easily.Here you tube providing API to get all information about your channel and fetch videos from channel.Here is the steps to integrate videos from YouTube channel in a websites.

1)  Create your API key from here

2)  Get your Chanel id from your Chanel

https://www.youtube.com/channel/UC66Jzd1kBdJFUN5XdZwQGEQ
see images

Get YouTube channel id

3)  Write a CURL function fetch data

function file_get_contents_curl_home($url) {
$ch = curl_init();

curl_setopt($ch, CURLOPT_AUTOREFERER, TRUE);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);

$data = curl_exec($ch);
curl_close($ch);

return $data;
}

4)  Create youtube videos fetch URL fetch URL

Replace with your key and Channel ID

$API_key = ‘*****************’;
$channelID = ‘UC66Jzd1kBdJFUN5XdZwQGEQ’;
$maxResults = 3;
$url = ‘https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=’ . $channelID . ‘&maxResults=’ . $maxResults . ‘&key=’ . $API_key . ”;
$videoList = json_decode(file_get_contents_curl_home($url));

5)  See full code

 
<pre>
 function file_get_contents_curl_home($url) {
 $ch = curl_init();

 curl_setopt($ch, CURLOPT_AUTOREFERER, TRUE);
 curl_setopt($ch, CURLOPT_HEADER, 0);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_URL, $url);
 curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);

 $data = curl_exec($ch);
 curl_close($ch);

 return $data;
 }
 $API_key = '*****************';
 $channelID = 'UC66Jzd1kBdJFUN5XdZwQGEQ';
 $maxResults = 3;
 $url = 'https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=' . $channelID . '&maxResults=' . $maxResults . '&key=' . $API_key . '';
 $videoList = json_decode(file_get_contents_curl_home($url));
 <div class="gallery-slider" >
 <!-- Swiper -->
 <div class="gallery-top">
 <div class="swiper-wrapper">
 <?php
 $key = 0;
 foreach ($videoList->items as $item) {
 ?>
 <div class="swiper-slide">
 <div class="embed-responsive embed-responsive-4by3" style="z-index:1;">
 <?php if ($key == 0) { ?> 
 <iframe class="embed-responsive-item" type="text/html" width="640" height="385" data-src="https://www.youtube.com/embed/<?php echo $item->id->videoId; ?>?rel=0&autoplay=1&version=3&enablejsapi=1&playerapiid=ytplayer" allowfullscreen="true" allowscriptaccess="always"" frameborder="0" controls id="video<?php echo $key; ?>"></iframe>
 <?php } else { ?>

 <iframe class="embed-responsive-item" type="text/html" width="640" height="385" src="https://www.youtube.com/embed/<?php echo $item->id->videoId; ?>?rel=0&version=3&enablejsapi=1&playerapiid=ytplayer" allowfullscreen="true" allowscriptaccess="always"" frameborder="0" controls id="video<?php echo $key; ?>"></iframe>
 <?php } ?>
 </div><div class="play_video" ></div>
 </div>
 <?php
 $key++;
 }
 
 ?>
 </div>
 <!-- Add Arrows -->
 <div class="swiper-button-next swiper-button-white"></div>
 <div class="swiper-button-prev swiper-button-white"></div>
 </div>
 <div class="row no-gutters" style="display:none;">
 <div class="col-md-11">
 <div class="swiper-container gallery-thumbs">
 <div class="swiper-wrapper">
 <?php
 $key = 0;
 foreach ($videoList->items as $item) {
 ?>
 <div class="swiper-slide">
 <img src="<?php echo $item->snippet->thumbnails->default->url; ?>" class="img-fluid" alt="">
 </div>
 <?php
 }
 ?>
 </div>
 </div>

 </div>
 <div class="col-md-1">
 <div class="custom-controls">
 <button data-action="slidePrev">
 <img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/images/icons/prev-slide.jpg" class="img-fluid" alt="slidecontrols">
 </button>
 <button data-action="slideNext">
 <img src="<?php echo esc_url(get_stylesheet_directory_uri()); ?>/images/icons/next-slide.jpg" class="img-fluid" alt="slidecontrols">
 </button>
 </div>
 </div>
 </div>
</div>


How to add google map in your website without paid API key ?

To add google map in your website without paid API key

1 Open google Map in your chrome browser

Type your location And Search as shown in figure

google-map

 

2) Click The Share Button
google-map

 

3) Click Embed optiongoogle-map

4) Paste the code in your page

That’s all 😛 you can add Google map without the Billing google API Key

Now can’t cheat your wife by saying I was busy in office work?

In this technology era it is difficult hide your personal info, google added one more in this check list , google map timeline,is the  google map new feature, that is storing each and every location you are traveling or visiting.suppose you went for party and come back home late night, but you can’t lie to your wife i was busy with my office work,intelligent wife definitely going to trap by  asking your maps timeline

How we can see your timeline

Open map in your device

Screenshot_2018-08-04-11-39-24-339_com.google.android.apps.maps[1]

Open your timeline from right top menu
Screenshot_2018-08-04-11-45-24-129_com.google.android.apps.maps[1]

Here you can see where he was yesterday 🙂