<div class="wrapper" data-video-guide>
<div class="o-video-guide">
<figure>
<div class="o-video-guide__inner-wrapper">
<div class="o-video-guide__video-container">
<div class="o-video-guide__subtitles js-subtitles-container"></div>
<video class="o-video-guide__video js-video-guide is-loading" disablePictureInPicture disableRemotePlayback playsinline preload="metadata" data-featured-image="/assets/images/sticky-guide.png">
<source src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem-vp9-chrome.webm" type='video/mp4; codecs="hvc1"'>
<source src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem.mp4" type="video/webm">
<track id="video-subtitles" kind="metadata" src="/assets/video/guidad-tur-nar-internet-kom-till-svenska-hem-undertexter.vtt" srclang="sv" default>
<track id="video-chapters" kind="chapters" label="Kapitel" src="/assets/video/guidad-tur-nar-internet-kom-chapters.vtt" srclang="sv">
<track id="video-metadata" kind="metadata" label="timeLineItems" src="/assets/video/guidad-tur-nar-internet-kom-metadata.vtt" srclang="sv">
</video>
<ul class="u-list-clean">
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image is-current" data-id="95494">
<div class="o-video-guide__timeline-item__text" data-video-headline-tpl>
<h1 class="o-video-guide__timeline-item__text__headline">När internet kom till våra svenska hem</h1>
</div>
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95497">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-introgif.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95463">
<img width="1728" height="1200" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang.jpg 1728w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-300x208.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-1024x711.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-1536x1067.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-605x420.jpg 605w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-418x290.jpg 418w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-838x582.jpg 838w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-426x296.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-8x5.jpg 8w" sizes="(max-width: 1728px) 100vw, 1728px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95461">
<img width="2048" height="1536" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-300x225.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-1024x768.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-1536x1152.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-700x525.jpg 700w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-560x420.jpg 560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-387x290.jpg 387w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-776x582.jpg 776w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-426x320.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-8x5.jpg 8w" sizes="(max-width: 2048px) 100vw, 2048px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95475">
<img width="2560" height="1920" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack.jpg 2560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-300x225.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-1024x768.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-1536x1152.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-2048x1536.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-700x525.jpg 700w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-560x420.jpg 560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-387x290.jpg 387w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-776x582.jpg 776w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-426x320.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-8x5.jpg 8w" sizes="(max-width: 2560px) 100vw, 2560px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95459">
<img width="2047" height="1365" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1.jpg 2047w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-300x200.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-1024x683.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-1536x1024.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-630x420.jpg 630w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-435x290.jpg 435w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-873x582.jpg 873w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-426x284.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-8x5.jpg 8w" sizes="(max-width: 2047px) 100vw, 2047px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95450">
<img width="1200" height="814" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon.jpg 1200w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-300x204.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-1024x695.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-619x420.jpg 619w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-428x290.jpg 428w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-858x582.jpg 858w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-426x289.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-8x5.jpg 8w" sizes="(max-width: 1200px) 100vw, 1200px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76402">
<img loading="lazy" width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76293">
<img width="1846" height="1038" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp.jpeg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp.jpeg 1846w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-300x169.jpeg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-1024x576.jpeg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-1536x864.jpeg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-726x408.jpeg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-500x281.jpeg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-1035x582.jpeg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-426x240.jpeg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-8x5.jpeg 8w" sizes="(max-width: 1846px) 100vw, 1846px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80889">
<img width="1024" height="680" src="https://internetmuseum.se/app/uploads/6275-M20.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/6275-M20.jpg 1024w, https://internetmuseum.se/app/uploads/6275-M20-300x199.jpg 300w" sizes="(max-width: 1024px) 100vw, 1024px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95472">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95471">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="90431">
<img width="1184" height="427" src="https://internetmuseum.se/app/uploads/annicatiger.jpg" class="attachment-full size-full wp-post-image" alt="Annica Tiger svensk internetpionjär" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/annicatiger.jpg 1184w, https://internetmuseum.se/app/uploads/annicatiger-300x108.jpg 300w, https://internetmuseum.se/app/uploads/annicatiger-1024x369.jpg 1024w, https://internetmuseum.se/app/uploads/annicatiger-726x262.jpg 726w, https://internetmuseum.se/app/uploads/annicatiger-500x180.jpg 500w, https://internetmuseum.se/app/uploads/annicatiger-426x154.jpg 426w" sizes="(max-width: 1184px) 100vw, 1184px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95464">
<img width="500" height="352" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-slowimage.gif" class="attachment-full size-full" alt="" decoding="async" loading="lazy">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95448">
<img width="2047" height="1365" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps.jpg 2047w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-300x200.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-1024x683.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-1536x1024.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-630x420.jpg 630w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-435x290.jpg 435w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-873x582.jpg 873w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-426x284.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-8x5.jpg 8w" sizes="(max-width: 2047px) 100vw, 2047px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76309">
<img width="1168" height="547" src="https://internetmuseum.se/app/uploads/Lunarstorm1.jpg" class="attachment-full size-full wp-post-image" alt="Lunarstorm hemsida" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/Lunarstorm1.jpg 1168w, https://internetmuseum.se/app/uploads/Lunarstorm1-300x140.jpg 300w, https://internetmuseum.se/app/uploads/Lunarstorm1-1024x480.jpg 1024w, https://internetmuseum.se/app/uploads/Lunarstorm1-726x340.jpg 726w, https://internetmuseum.se/app/uploads/Lunarstorm1-500x234.jpg 500w, https://internetmuseum.se/app/uploads/Lunarstorm1-426x200.jpg 426w, https://internetmuseum.se/app/uploads/Lunarstorm1-8x5.jpg 8w" sizes="(max-width: 1168px) 100vw, 1168px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95456">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76300">
<img width="1264" height="711" src="https://internetmuseum.se/app/uploads/nick_borgen.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/nick_borgen.jpg 1264w, https://internetmuseum.se/app/uploads/nick_borgen-300x169.jpg 300w, https://internetmuseum.se/app/uploads/nick_borgen-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/nick_borgen-726x408.jpg 726w, https://internetmuseum.se/app/uploads/nick_borgen-500x281.jpg 500w, https://internetmuseum.se/app/uploads/nick_borgen-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/nick_borgen-426x240.jpg 426w, https://internetmuseum.se/app/uploads/nick_borgen-8x5.jpg 8w" sizes="(max-width: 1264px) 100vw, 1264px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95447">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80888">
<img width="1280" height="738" src="https://internetmuseum.se/app/uploads/skrivbord.jpg" class="attachment-full size-full wp-post-image" alt="Dator på skrivbord i lego" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/skrivbord.jpg 1280w, https://internetmuseum.se/app/uploads/skrivbord-300x173.jpg 300w, https://internetmuseum.se/app/uploads/skrivbord-1024x590.jpg 1024w, https://internetmuseum.se/app/uploads/skrivbord-726x420.jpg 726w, https://internetmuseum.se/app/uploads/skrivbord-500x288.jpg 500w, https://internetmuseum.se/app/uploads/skrivbord-1009x582.jpg 1009w, https://internetmuseum.se/app/uploads/skrivbord-426x246.jpg 426w, https://internetmuseum.se/app/uploads/skrivbord-8x5.jpg 8w" sizes="(max-width: 1280px) 100vw, 1280px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80747">
<img width="828" height="360" src="https://internetmuseum.se/app/uploads/flash.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/flash.jpg 828w, https://internetmuseum.se/app/uploads/flash-300x130.jpg 300w, https://internetmuseum.se/app/uploads/flash-726x316.jpg 726w, https://internetmuseum.se/app/uploads/flash-500x217.jpg 500w, https://internetmuseum.se/app/uploads/flash-426x185.jpg 426w" sizes="(max-width: 828px) 100vw, 828px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="84790">
<img width="254" height="195" src="https://internetmuseum.se/app/uploads/2016/12/ansiktsburk.gif" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95455">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80637">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq.png" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq.png 1920w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-300x169.png 300w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-1024x576.png 1024w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-1536x864.png 1536w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-726x408.png 726w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-500x281.png 500w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-1035x582.png 1035w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-426x240.png 426w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-8x5.png 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95477">
<img width="1920" height="1080" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-8x5.jpg 8w" sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95466">
<img width="2560" height="1440" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-scaled.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-scaled.jpg 2560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-2048x1152.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1920x1080.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-8x5.jpg 8w" sizes="(max-width: 2560px) 100vw, 2560px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95467">
<img width="2560" height="1440" src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-scaled.jpg" class="attachment-full size-full" alt="" decoding="async" loading="lazy" srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-scaled.jpg 2560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-2048x1152.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1920x1080.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-8x5.jpg 8w" sizes="(max-width: 2560px) 100vw, 2560px">
</li>
</ul>
</div>
<div class="o-video-guide__controls">
<figcaption class="o-video-guide__chapters">
<span class="o-video-guide__title delta">Den stora berättelsen om internet (<span class="o-video-guide__totaltime js-totaltime"></span>)</span>
<ol class="o-video-guide__chapters__list js-chapters">
<li id="0" class="is-current-item">
<a tabindex="0" rel="0">Kapitel 1 / 7: Introduktion</a>
</li>
<li id="32">
<a tabindex="0" rel="32">Kapitel 2 / 7: Minns du ditt första möte med
internet?</a>
</li>
<li id="139">
<a tabindex="0" rel="139">Kapitel 3 / 7: Tidiga internet i hemmet</a>
</li>
<li id="225">
<a tabindex="0" rel="225">Kapitel 4 / 7: De första hemsidorna</a>
</li>
<li id="360">
<a tabindex="0" rel="360">Kapitel 5 / 7: Lunarstorm och nätet innan sociala
medier</a>
</li>
<li id="502">
<a tabindex="0" rel="502">Kapitel 6 / 7: Flash-explosionen</a>
</li>
<li id="577">
<a tabindex="0" rel="577">Kapitel 7 / 7: 2000-talet</a>
</li>
</ol>
</figcaption>
<div class="o-video-guide__buttons">
<button type="button" class="o-video-guide__button js-previous-chapter" title="Föregående kapitel">
<span class="u-visuallyhidden">Föregående kapitel</span>
<svg class="icon o-video-guide__rewind-icon">
<use xlink:href="#icon-step-backwards"></use>
</svg>
</button>
<button type="button" class="o-video-guide__button o-video-guide__button--play js-play-btn" title="Play/Pause">
<span class="u-visuallyhidden">Play/Pause</span>
<svg class="icon o-video-guide__play-icon js-play-icon">
<use xlink:href="#icon-play"></use>
</svg>
<svg class="icon o-video-guide__play-icon js-pause-icon is-hidden">
<use xlink:href="#icon-pause"></use>
</svg>
</button>
<button type="button" class="o-video-guide__button o-video-guide__button--next js-next-chapter" title="Nästa kapitel">
<span class="u-visuallyhidden">Nästa kapitel</span>
<svg class="icon o-video-guide__forward-icon">
<use xlink:href="#icon-step-forwards"></use>
</svg>
</button>
<div class="o-video-guide__countdown js-countdown"></div>
<button type="button" class="o-video-guide__button o-video-guide__button--subtitles js-subtitles-btn" title="Undertexter">
<span class="u-visuallyhidden">Undertexter</span>
<svg class="icon o-video-guide__subtitles-icon">
<use xlink:href="#icon-subtitles"></use>
</svg>
</button>
</div>
</div>
<a href="/components/detail/continue-video-guide" target="_parent" class="o-video-guide__button-abort a-button a-button--small a-button--peacock js-abort-guide">
<span class="a-button__text color-snow u-nowrap">Avsluta</span>
</a>
</div>
<nav class="o-video-guide__timelineposts js-timeline-posts">
<button type="button" class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-video-guide__timelineposts__button-navigation js-show-timelineposts">
<span class="a-button__text">Visa navigering</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-backwards"></use>
</svg>
</button>
<dl class="u-list-clean o-video-guide__timelineposts__list">
<dl class="u-list-clean o-video-guide__timelineposts__list">
<dt>Fördjupa dig</dt>
<dd>
<a href="https://internetmuseum.se/tidslinjen/algonet/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76402" data-label="Läs mer">1994 - Internetleverantören Algonet tar vanliga svenskar ut på nätet
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/internet-ar-arets-julklapp/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76293" data-label="Läs mer">1996 - Internet blir årets julklapp
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/annica-tiger-lar-svenskarna-att-bygga-egna-hemsidor/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="90431" data-label="Läs mer">1996 - Annica Tiger lär svenskarna att bygga egna hemsidor
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/lunarstorm/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76309" data-label="Läs mer">1996 - Lunarstorm (Stajl Plejs) blir ett av världens första webbcommunityn
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/nick-borgen-sjunger-om-world-wide-web/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="76300" data-label="Läs mer">1997 - Nick Borgen sjunger "World Wide Web" i Melodifestivalen
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/hem-pc-reformen-snabbar-pa-utvecklingen/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80888" data-label="Läs mer">1998 - Hem-pc-reformen kickar igång: Nu ska alla kunna ha en dator hemma
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/alskade-hatade-flash/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80747" data-label="Läs mer">1996 - Älskade hatade Flash
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/ansiktsburk-gor-succe/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="84790" data-label="Läs mer">2001 - Ansiktsburk – här är Sveriges första virala succé</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/snabbmeddelanden-borjar-skickas-med-icq/" class="o-video-guide__timelineposts__link js-timeline-post" data-id="80637" data-label="Läs mer">1996 - Snabbmeddelanden börjar skickas – med ICQ
</a>
</dd>
</dl>
</dl>
</nav>
</figure>
</div>
<div class="m-continue-video-guide js-guide-continue u-visuallyhidden">
<button type="button" class="a-button a-button--peacock-light background-peacock-light a-button--icon a-button--standalone-icon m-continue-video-guide__close js-guide-close">
<span class="a-button__text u-visuallyhidden">Stäng</span>
<svg class="icon a-button__icon u-icon--smallest">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<div class="m-continue-video-guide__inner">
<a href="/components/detail/video-guide.html" class="m-continue-video-guide__continue js-guide-continue-link" data-alt-text="Fortsätt den guidade turen">
<span class="u-visuallyhidden">Guidad tur</span>
<div class="m-continue-video-guide__arrow"></div>
</a>
<progress-ring class="m-continue-video-guide__progressbar" stroke="4" radius="50" progress="70"></progress-ring>
<img class="m-continue-video-guide__image js-guide-continue-image" src="/assets/images/sticky-guide.png" alt="Fortsätt den guidade turen">
</div>
</div>
</div>
<div class="wrapper" data-video-guide>
<div class="o-video-guide">
<figure>
<div class="o-video-guide__inner-wrapper">
<div class="o-video-guide__video-container">
<div class="o-video-guide__subtitles js-subtitles-container"></div>
<video class="o-video-guide__video js-video-guide is-loading" disablePictureInPicture disableRemotePlayback playsinline preload="metadata" data-featured-image="/assets/images/sticky-guide.png">
<source src="{{videoSrc2}}" type='video/mp4; codecs="hvc1"'>
<source src="{{videoSrc}}" type="video/webm">
<track id="video-subtitles" kind="metadata" src="/assets/video/guidad-tur-nar-internet-kom-till-svenska-hem-undertexter.vtt" srclang="sv" default>
<track id="video-chapters" kind="chapters" label="Kapitel" src="/assets/video/guidad-tur-nar-internet-kom-chapters.vtt" srclang="sv">
<track id="video-metadata" kind="metadata" label="timeLineItems" src="/assets/video/guidad-tur-nar-internet-kom-metadata.vtt" srclang="sv">
</video>
<ul class="u-list-clean">
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image is-current" data-id="95494">
<div class="o-video-guide__timeline-item__text" data-video-headline-tpl>
<h1 class="o-video-guide__timeline-item__text__headline">När internet kom till våra svenska hem</h1>
</div>
<img width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-omslag-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95497">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-introgif.gif"
class="attachment-full size-full" alt="" decoding="async" loading="lazy">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95463">
<img
width="1728" height="1200"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang.jpg 1728w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-300x208.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-1024x711.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-1536x1067.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-605x420.jpg 605w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-418x290.jpg 418w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-838x582.jpg 838w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-426x296.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-pc-gang-8x5.jpg 8w"
sizes="(max-width: 1728px) 100vw, 1728px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95461">
<img
width="2048" height="1536"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-300x225.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-1024x768.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-1536x1152.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-700x525.jpg 700w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-560x420.jpg 560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-387x290.jpg 387w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-776x582.jpg 776w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-426x320.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem3-8x5.jpg 8w"
sizes="(max-width: 2048px) 100vw, 2048px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95475">
<img
width="2560" height="1920"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack.jpg 2560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-300x225.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-1024x768.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-1536x1152.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-2048x1536.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-700x525.jpg 700w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-560x420.jpg 560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-387x290.jpg 387w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-776x582.jpg 776w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-426x320.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-telefonjack-8x5.jpg 8w"
sizes="(max-width: 2560px) 100vw, 2560px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95459">
<img
width="2047" height="1365"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1.jpg 2047w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-300x200.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-1024x683.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-1536x1024.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-630x420.jpg 630w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-435x290.jpg 435w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-873x582.jpg 873w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-426x284.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-modem1-8x5.jpg 8w"
sizes="(max-width: 2047px) 100vw, 2047px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95450">
<img
width="1200" height="814"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon.jpg 1200w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-300x204.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-1024x695.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-619x420.jpg 619w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-428x290.jpg 428w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-858x582.jpg 858w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-426x289.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-gammal-telefon-8x5.jpg 8w"
sizes="(max-width: 1200px) 100vw, 1200px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76402">
<img
loading="lazy" width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam.jpg"
class="attachment-full size-full wp-post-image" alt="" decoding="async"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-algonetreklam-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76293">
<img
width="1846" height="1038"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp.jpeg"
class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp.jpeg 1846w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-300x169.jpeg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-1024x576.jpeg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-1536x864.jpeg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-726x408.jpeg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-500x281.jpeg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-1035x582.jpeg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-426x240.jpeg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-internet-arets-julklapp-8x5.jpeg 8w"
sizes="(max-width: 1846px) 100vw, 1846px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80889">
<img
width="1024" height="680" src="https://internetmuseum.se/app/uploads/6275-M20.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/6275-M20.jpg 1024w, https://internetmuseum.se/app/uploads/6275-M20-300x199.jpg 300w"
sizes="(max-width: 1024px) 100vw, 1024px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95472">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet4-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95471">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-swipnet3-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="90431">
<img
width="1184" height="427" src="https://internetmuseum.se/app/uploads/annicatiger.jpg"
class="attachment-full size-full wp-post-image" alt="Annica Tiger svensk internetpionjär"
decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/annicatiger.jpg 1184w, https://internetmuseum.se/app/uploads/annicatiger-300x108.jpg 300w, https://internetmuseum.se/app/uploads/annicatiger-1024x369.jpg 1024w, https://internetmuseum.se/app/uploads/annicatiger-726x262.jpg 726w, https://internetmuseum.se/app/uploads/annicatiger-500x180.jpg 500w, https://internetmuseum.se/app/uploads/annicatiger-426x154.jpg 426w"
sizes="(max-width: 1184px) 100vw, 1184px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95464">
<img
width="500" height="352"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-slowimage.gif"
class="attachment-full size-full" alt="" decoding="async" loading="lazy">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95448">
<img
width="2047" height="1365"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps.jpg 2047w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-300x200.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-1024x683.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-1536x1024.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-630x420.jpg 630w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-435x290.jpg 435w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-873x582.jpg 873w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-426x284.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-50k-005mbps-8x5.jpg 8w"
sizes="(max-width: 2047px) 100vw, 2047px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76309">
<img
width="1168" height="547" src="https://internetmuseum.se/app/uploads/Lunarstorm1.jpg"
class="attachment-full size-full wp-post-image" alt="Lunarstorm hemsida" decoding="async"
loading="lazy"
srcset="https://internetmuseum.se/app/uploads/Lunarstorm1.jpg 1168w, https://internetmuseum.se/app/uploads/Lunarstorm1-300x140.jpg 300w, https://internetmuseum.se/app/uploads/Lunarstorm1-1024x480.jpg 1024w, https://internetmuseum.se/app/uploads/Lunarstorm1-726x340.jpg 726w, https://internetmuseum.se/app/uploads/Lunarstorm1-500x234.jpg 500w, https://internetmuseum.se/app/uploads/Lunarstorm1-426x200.jpg 426w, https://internetmuseum.se/app/uploads/Lunarstorm1-8x5.jpg 8w"
sizes="(max-width: 1168px) 100vw, 1168px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95456">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-lunarstorm-12m-users-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="76300">
<img
width="1264" height="711" src="https://internetmuseum.se/app/uploads/nick_borgen.jpg"
class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/nick_borgen.jpg 1264w, https://internetmuseum.se/app/uploads/nick_borgen-300x169.jpg 300w, https://internetmuseum.se/app/uploads/nick_borgen-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/nick_borgen-726x408.jpg 726w, https://internetmuseum.se/app/uploads/nick_borgen-500x281.jpg 500w, https://internetmuseum.se/app/uploads/nick_borgen-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/nick_borgen-426x240.jpg 426w, https://internetmuseum.se/app/uploads/nick_borgen-8x5.jpg 8w"
sizes="(max-width: 1264px) 100vw, 1264px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95447">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-10procent-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80888">
<img
width="1280" height="738" src="https://internetmuseum.se/app/uploads/skrivbord.jpg"
class="attachment-full size-full wp-post-image" alt="Dator på skrivbord i lego"
decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/skrivbord.jpg 1280w, https://internetmuseum.se/app/uploads/skrivbord-300x173.jpg 300w, https://internetmuseum.se/app/uploads/skrivbord-1024x590.jpg 1024w, https://internetmuseum.se/app/uploads/skrivbord-726x420.jpg 726w, https://internetmuseum.se/app/uploads/skrivbord-500x288.jpg 500w, https://internetmuseum.se/app/uploads/skrivbord-1009x582.jpg 1009w, https://internetmuseum.se/app/uploads/skrivbord-426x246.jpg 426w, https://internetmuseum.se/app/uploads/skrivbord-8x5.jpg 8w"
sizes="(max-width: 1280px) 100vw, 1280px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80747">
<img
width="828" height="360" src="https://internetmuseum.se/app/uploads/flash.jpg"
class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/flash.jpg 828w, https://internetmuseum.se/app/uploads/flash-300x130.jpg 300w, https://internetmuseum.se/app/uploads/flash-726x316.jpg 726w, https://internetmuseum.se/app/uploads/flash-500x217.jpg 500w, https://internetmuseum.se/app/uploads/flash-426x185.jpg 426w"
sizes="(max-width: 828px) 100vw, 828px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="84790">
<img
width="254" height="195"
src="https://internetmuseum.se/app/uploads/2016/12/ansiktsburk.gif"
class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy"></li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95455">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-logocollage-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="80637">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq.png"
class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq.png 1920w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-300x169.png 300w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-1024x576.png 1024w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-1536x864.png 1536w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-726x408.png 726w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-500x281.png 500w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-1035x582.png 1035w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-426x240.png 426w, https://internetmuseum.se/app/uploads/2015/11/guidad-tur-nar-internet-kom-icq-8x5.png 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95477">
<img
width="1920" height="1080"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-iphone-8x5.jpg 8w"
sizes="(max-width: 1920px) 100vw, 1920px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95466">
<img
width="2560" height="1440"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-scaled.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-scaled.jpg 2560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-2048x1152.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-1920x1080.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers2-8x5.jpg 8w"
sizes="(max-width: 2560px) 100vw, 2560px">
</li>
<li class="o-video-guide__timeline-item js-timeline-post js-timeline-image" data-id="95467">
<img
width="2560" height="1440"
src="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-scaled.jpg"
class="attachment-full size-full" alt="" decoding="async" loading="lazy"
srcset="https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-scaled.jpg 2560w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-300x169.jpg 300w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1024x576.jpg 1024w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1536x864.jpg 1536w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-2048x1152.jpg 2048w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-726x408.jpg 726w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-500x281.jpg 500w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1035x582.jpg 1035w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-426x240.jpg 426w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-1920x1080.jpg 1920w, https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-smartphoneusers3-8x5.jpg 8w"
sizes="(max-width: 2560px) 100vw, 2560px">
</li>
</ul>
</div>
<div class="o-video-guide__controls">
<figcaption class="o-video-guide__chapters">
<span class="o-video-guide__title delta">Den stora berättelsen om internet (<span class="o-video-guide__totaltime js-totaltime"></span>)</span>
<ol class="o-video-guide__chapters__list js-chapters">
<li id="0" class="is-current-item">
<a tabindex="0" rel="0">Kapitel 1 / 7: Introduktion</a>
</li>
<li id="32">
<a tabindex="0" rel="32">Kapitel 2 / 7: Minns du ditt första möte med
internet?</a>
</li>
<li id="139">
<a tabindex="0" rel="139">Kapitel 3 / 7: Tidiga internet i hemmet</a>
</li>
<li id="225">
<a tabindex="0" rel="225">Kapitel 4 / 7: De första hemsidorna</a>
</li>
<li id="360">
<a tabindex="0" rel="360">Kapitel 5 / 7: Lunarstorm och nätet innan sociala
medier</a>
</li>
<li id="502">
<a tabindex="0" rel="502">Kapitel 6 / 7: Flash-explosionen</a>
</li>
<li id="577">
<a tabindex="0" rel="577">Kapitel 7 / 7: 2000-talet</a>
</li>
</ol>
</figcaption>
<div class="o-video-guide__buttons">
<button type="button" class="o-video-guide__button js-previous-chapter" title="Föregående kapitel">
<span class="u-visuallyhidden">Föregående kapitel</span>
{{>@ icon id="step-backwards" additional_classes="o-video-guide__rewind-icon"}}
</button>
<button type="button" class="o-video-guide__button o-video-guide__button--play js-play-btn" title="Play/Pause">
<span class="u-visuallyhidden">Play/Pause</span>
{{>@ icon id="play" additional_classes="o-video-guide__play-icon js-play-icon"}}
{{>@ icon id="pause" additional_classes="o-video-guide__play-icon js-pause-icon is-hidden"}}
</button>
<button type="button" class="o-video-guide__button o-video-guide__button--next js-next-chapter" title="Nästa kapitel">
<span class="u-visuallyhidden">Nästa kapitel</span>
{{>@ icon id="step-forwards" additional_classes="o-video-guide__forward-icon"}}
</button>
<div class="o-video-guide__countdown js-countdown"></div>
<button type="button" class="o-video-guide__button o-video-guide__button--subtitles js-subtitles-btn" title="Undertexter">
<span class="u-visuallyhidden">Undertexter</span>
{{>@ icon id="subtitles" additional_classes="o-video-guide__subtitles-icon"}}
</button>
</div>
</div>
<a href="/components/detail/continue-video-guide" target="_parent" class="o-video-guide__button-abort a-button a-button--small a-button--peacock js-abort-guide">
<span class="a-button__text color-snow u-nowrap">Avsluta</span>
</a>
</div>
<nav class="o-video-guide__timelineposts js-timeline-posts">
<button type="button" class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-video-guide__timelineposts__button-navigation js-show-timelineposts">
<span class="a-button__text">Visa navigering</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-arrow-backwards"></use>
</svg>
</button>
<dl class="u-list-clean o-video-guide__timelineposts__list">
<dl class="u-list-clean o-video-guide__timelineposts__list">
<dt>Fördjupa dig</dt>
<dd>
<a href="https://internetmuseum.se/tidslinjen/algonet/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="76402" data-label="Läs mer">1994 - Internetleverantören Algonet tar vanliga svenskar ut på nätet
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/internet-ar-arets-julklapp/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="76293" data-label="Läs mer">1996 - Internet blir årets julklapp
</a>
</dd>
<dd>
<a
href="https://internetmuseum.se/tidslinjen/annica-tiger-lar-svenskarna-att-bygga-egna-hemsidor/"
class="o-video-guide__timelineposts__link js-timeline-post" data-id="90431"
data-label="Läs mer">1996 - Annica Tiger lär svenskarna att bygga egna hemsidor
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/lunarstorm/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="76309" data-label="Läs mer">1996 - Lunarstorm (Stajl Plejs) blir ett av världens första webbcommunityn
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/nick-borgen-sjunger-om-world-wide-web/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="76300" data-label="Läs mer">1997 - Nick Borgen sjunger "World Wide Web" i Melodifestivalen
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/hem-pc-reformen-snabbar-pa-utvecklingen/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="80888" data-label="Läs mer">1998 - Hem-pc-reformen kickar igång: Nu ska alla kunna ha en dator hemma
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/alskade-hatade-flash/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="80747" data-label="Läs mer">1996 - Älskade hatade Flash
</a>
</dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/ansiktsburk-gor-succe/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="84790" data-label="Läs mer">2001 - Ansiktsburk – här är Sveriges första virala succé</a></dd>
<dd>
<a href="https://internetmuseum.se/tidslinjen/snabbmeddelanden-borjar-skickas-med-icq/"
class="o-video-guide__timelineposts__link js-timeline-post"
data-id="80637" data-label="Läs mer">1996 - Snabbmeddelanden börjar skickas – med ICQ
</a>
</dd>
</dl>
</dl>
</nav>
</figure>
</div>
{{> @continue-video-guide additional_classes="u-visuallyhidden"}}
</div>
{
"videoSrc": "https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem.mp4",
"videoSrc2": "https://internetmuseum.se/app/uploads/2023/01/guidad-tur-nar-internet-kom-till-svenska-hem-vp9-chrome.webm"
}
import getCurrentCueIndex from './getCurrentCueIndex';
import track from '../../assets/js/track';
export default class VideoGuidePlayback {
constructor(element, video) {
this.video = video;
this.playBtn = element.querySelector('.js-play-btn');
this.playIcon = element.querySelector('.js-play-icon');
this.pauseIcon = element.querySelector('.js-pause-icon');
this.forwardsButton = element.querySelector('.js-next-chapter');
this.backwardsButton = element.querySelector('.js-previous-chapter');
this.totaltimeElement = element.querySelector('.js-totaltime');
this.countDownElement = element.querySelector('.js-countdown');
this.chapterElements = Array.from(element.querySelectorAll('.js-chapters li'));
this.sessionKeys = {
currentTime: 'InmsCurrentTime',
duration: 'InmsDuration',
currentGuideURL: 'InmsCurrentGuideURL',
currentGuideImage: 'InmsCurrentGuideImage',
};
this.duration = null;
this.timeLeft = null;
this.init();
this.attach();
}
init() {
this.duration = this.video.duration;
this.chapters = this.video.textTracks.getTrackById('video-chapters');
if (this.chapters) {
this.chapters.addEventListener('cuechange', this.onCueChange);
this.setForwardState(true);
}
// Run on next tick to ensure that the video has loaded and event listeners are attached
setTimeout(() => {
this.sync();
}, 0);
// Format duration to minutes and seconds
const minutes = Math.floor(this.duration / 60);
const seconds = Math.floor(this.duration % 60);
this.totaltimeElement.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
sync() {
const key = this.sessionKeys.currentTime;
const guideURL = window.location.href;
// If the current guide URL is not the same as the one in session storage, do not sync
if (sessionStorage.getItem(this.sessionKeys.currentGuideURL) !== guideURL) {
return;
}
if (sessionStorage.getItem(key)) {
const videoCurrentTime = sessionStorage.getItem(key);
if (videoCurrentTime > 0) {
this.video.currentTime = videoCurrentTime;
}
}
}
attach() {
this.playBtn.addEventListener('click', this.togglePlay);
this.forwardsButton.addEventListener('click', this.nextChapter);
this.backwardsButton.addEventListener('click', this.previousChapter);
window.addEventListener('visibilitychange', this.saveState);
window.addEventListener('beforeunload', this.saveState);
}
setPlayActive() {
this.pauseIcon.classList.remove('is-hidden');
this.playIcon.classList.add('is-hidden');
}
setPauseActive() {
this.pauseIcon.classList.add('is-hidden');
this.playIcon.classList.remove('is-hidden');
}
setForwardState(active) {
this.forwardsButton.disabled = !active;
}
setBackwardState(active) {
this.backwardsButton.disabled = !active;
}
updateChapterState() {
const { cues } = this.chapters;
const activeCueIndex = getCurrentCueIndex(this.chapters);
this.setBackwardState(activeCueIndex > 0);
this.setForwardState(activeCueIndex < cues.length - 1);
this.chapterElements.forEach((chapter, i) => {
if (i === activeCueIndex) {
chapter.classList.add('is-current-item');
} else {
chapter.classList.remove('is-current-item');
}
});
}
saveState = () => {
if (this.video.currentTime > 0) {
const {
currentTime,
duration,
currentGuideURL,
currentGuideImage,
} = this.sessionKeys;
const guideURL = window.location.href;
const guideImage = this.video.dataset.featuredImage;
sessionStorage.setItem(currentTime, this.video.currentTime);
sessionStorage.setItem(duration, this.video.duration);
sessionStorage.setItem(currentGuideURL, guideURL);
sessionStorage.setItem(currentGuideImage, guideImage);
}
};
clearState = () => {
Object.values(this.sessionKeys).forEach((key) => {
sessionStorage.removeItem(key);
});
};
onPlay = () => {
this.setPlayActive();
};
onPause = () => {
this.setPauseActive();
};
resetState = () => {
this.setPauseActive();
this.clearState();
this.setBackwardState(false);
this.setForwardState(false);
this.video.currentTime = 0;
};
onEnded = () => {
this.resetState();
track({
event: 'guided_tour',
eventInfo: {
category: 'guided_tour',
action: 'guide_completed',
label: window.location.href,
},
});
};
onAbort = () => {
this.video.pause();
this.resetState();
};
onTimeUpdate = () => {
const timeLeft = Math.floor(this.duration - this.video.currentTime);
// Time update fires every 250ms, so we only want to update the DOM when the time left changes
if (timeLeft === this.timeLeft) {
return;
}
this.timeLeft = timeLeft;
const minutes = Math.floor(timeLeft / 60);
const seconds = Math.floor(timeLeft % 60);
this.countDownElement.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
onCueChange = () => {
this.updateChapterState();
};
togglePlay = () => {
let label;
if (this.video.paused) {
label = 'Play';
this.video.play();
} else {
label = 'Pause';
this.video.pause();
}
track({
event: 'guided_tour',
eventInfo: {
category: 'guided_tour',
action: 'player_click',
label,
},
});
};
nextChapter = () => {
const { cues } = this.chapters;
const activeCueIndex = getCurrentCueIndex(this.chapters);
if (activeCueIndex < cues.length - 1) {
this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
this.updateChapterState();
track({
event: 'guided_tour',
eventInfo: {
category: 'guided_tour',
action: 'player_click',
label: 'Forward',
},
});
}
};
previousChapter = () => {
const { cues } = this.chapters;
const activeCueIndex = getCurrentCueIndex(this.chapters);
if (activeCueIndex > 0) {
this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
this.updateChapterState();
track({
event: 'guided_tour',
eventInfo: {
category: 'guided_tour',
action: 'player_click',
label: 'Backward',
},
});
}
}
}
import track from '../../assets/js/track';
export default class VideoGuideSubtitles {
constructor(element, video) {
this.element = element;
this.video = video;
this.subtitlesBtn = element.querySelector('.js-subtitles-btn');
this.subtitlesContainer = element.querySelector('.js-subtitles-container');
this.init();
this.attach();
}
init() {
this.subtitles = this.video.textTracks.getTrackById('video-subtitles');
}
attach() {
this.subtitlesBtn.addEventListener('click', this.toggleSubtitles);
this.subtitles.addEventListener('cuechange', this.onCueChange);
}
clearSubtitles() {
this.subtitlesContainer.innerHTML = '';
}
onEnded = () => {
this.clearSubtitles();
};
onCueChange = () => {
const { activeCues } = this.subtitles;
if (activeCues.length > 0) {
this.subtitlesContainer.innerHTML = `<span>${activeCues[0].text}</span>`;
} else {
this.clearSubtitles();
}
};
toggleSubtitles = () => {
this.subtitlesBtn.classList.toggle('is-active');
this.subtitlesContainer.classList.toggle('is-visible');
track({
event: 'guided_tour',
eventInfo: {
category: 'guided_tour',
action: 'player_click',
label: 'Subtitles',
},
});
};
}
export default class VideoGuideTimeline {
constructor(element, video) {
this.element = element;
this.video = video;
this.container = element.querySelector('.js-timeline-posts');
this.posts = Array.from(element.querySelectorAll('.js-timeline-post:not(.js-timeline-image)'));
this.images = Array.from(element.querySelectorAll('.js-timeline-image'));
this.toggleBtn = element.querySelector('.js-show-timelineposts');
this.headlineTpl = element.querySelector('[data-video-headline-tpl]');
this.headlineCache = {};
this.init();
this.attach();
}
init() {
this.meta = this.video.textTracks.getTrackById('video-metadata');
}
attach() {
this.meta.addEventListener('cuechange', this.onCueChange);
if (this.toggleBtn) {
this.toggleBtn.addEventListener('click', this.togglePosts);
}
}
togglePosts = () => {
this.toggleBtn.classList.toggle('is-toggeled');
this.container.classList.toggle('is-visible');
};
createImageHeadline(activeCue, post) {
if (activeCue.text in this.headlineCache) {
return;
}
let element = post.querySelector('[data-video-headline-tpl]');
if (post.querySelector('[data-video-headline-tpl]')) {
this.headlineCache[activeCue.text] = element;
return;
}
element = this.headlineTpl.cloneNode(true);
const prevHeadline = element.querySelector('h1');
const headline = document.createElement('h2');
headline.className = prevHeadline.className;
headline.innerHTML = activeCue.id;
prevHeadline.parentNode.replaceChild(headline, prevHeadline);
post.appendChild(element);
this.headlineCache[activeCue.text] = element;
}
onCueChange = () => {
const { activeCues } = this.meta;
if (activeCues.length > 0) {
const activeCue = activeCues[0];
const activePost = this.posts.find((post) => post.dataset.id === activeCue.text);
if (activePost) {
this.posts.forEach((post) => {
post.classList.remove('is-current');
});
activePost.classList.add('is-current');
}
this.images.forEach((post) => {
if (post.dataset.id === activeCue.text) {
post.classList.add('is-current');
this.createImageHeadline(activeCue, post);
} else {
post.classList.remove('is-current');
}
});
}
};
}
@charset "UTF-8";
@include organism(video-guide) {
flex-direction: column;
background-color: $color-snow;
border-radius: $border-radius;
overflow: hidden;
@include e(inner-wrapper) {
width: 100%;
position: relative;
}
> figure {
display: flex;
overflow: hidden;
position: relative;
}
@include e(video-container) {
position: relative;
padding-top: 70vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@include bp-up(sm) {
padding-top: 76.25%;
}
@include bp-up(md) {
padding-top: 56.25%;
}
}
@include e(timeline-item) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
justify-content: center;
transition: opacity 0.25s ease-out;
margin: 0;
padding: 0;
&:first-child,
&.is-current {
opacity: 1;
}
&.is-current ~ & {
opacity: 0;
}
img {
border-radius: 0;
object-fit: cover;
object-position: 50% 25%;
height: 100%;
width: 100%;
}
@include e(text) {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
padding-left: rhythm(2);
padding-right: rhythm(2);
transform: translateY(-75%);
@include bp-up(md) {
transform: translateY(-50%);
padding-left: rhythm(4);
padding-right: rhythm(4);
}
@include bp-up(lg) {
transform: translateY(-50%);
}
@include bp-up(xl) {
left: rhythm(8);
width: calc(100% - rhythm(16));
}
@include e(headline) {
font-family: $font-family-bold;
color: $color-snow;
text-shadow: 0 0 rem(50px) rgba($color-black, 1),
0 0 rem(10px) rgba($color-black, 1),
rem(1px) rem(1px) rem(2px) rgba($color-black, 0.6);
@include plumber(
$font-size: 3,
$line-height: 4,
$leading-bottom: 1,
$baseline: $headings-baseline
);
@include bp-up(sm) {
@include plumber(
$font-size: 4.5,
$line-height: 5,
$leading-bottom: 1
);
}
@include bp-up(lg) {
@include plumber(
$font-size: 7,
$line-height: 8,
$leading-bottom: 2
);
}
}
> a {
font-size: $size-base * 1.3;
font-family: $font-family-headings;
padding: rhythm(0.5) rhythm(2);
color: $color-peacock;
text-decoration: none;
line-height: 1;
position: relative;
&::after {
content: '';
position: absolute;
z-index: -2;
width: 100%;
height: 100%;
background-color: rgba($color-black, 0.7);
bottom: 0;
left: 0;
}
&::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: $color-snow;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
&:hover::before {
transform-origin: left;
transform: scaleX(1);
}
}
}
}
@include e(video) {
display: block;
position: absolute;
left: auto;
right: auto;
bottom: 0;
z-index: 2;
width: 150px;
height: 150px;
&.is-loading {
background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' dur='2.5s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' calcMode='linear' values='9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182' keyTimes='0;0.5;1' dur='2.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center center;
background-size: 30% 30%;
}
@include bp-up(sm) {
left: 0;
}
@include bp-up(lg) {
width: 200px;
height: 200px;
}
@include bp-up(xxl) {
width: 250px;
height: 250px;
}
}
@include e(controls) {
background-color: $color-snow;
display: flex;
align-items: center;
justify-content: space-between;
padding: rhythm(2);
flex-direction: column-reverse;
overflow: hidden;
@include bp-up(sm) {
transform: translateX(0);
}
@include bp-up(md) {
align-items: stretch;
flex-direction: row;
}
}
@include e(title) {
line-height: 1;
margin-top: rhythm(1);
}
@include e(chapters) {
width: 100%;
display: flex;
flex-direction: column;
@include e(list) {
width: 100%;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
> li {
display: flex;
align-items: center;
background-color: $color-snow;
font-size: $size-medium;
display: none;
line-height: 1;
@include bp-up(md) {
font-size: $size-medium-plus;
}
&.is-current-item {
display: block;
}
}
}
@include bp-up(md) {
align-items: stretch;
}
}
@include e(timelineposts) {
z-index: 2;
width: 250px;
min-width: 250px;
background-color: $color-cyberspace;
position: relative;
transform: translateX(100%);
transition: transform 0.25s ease-out;
flex-shrink: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
@include bp-up(md) {
transform: translateX(0);
position: relative;
top: auto;
right: auto;
bottom: auto;
}
@include bp-up(xl) {
width: 350px;
}
&.is-visible {
transform: translateX(0);
}
@include e(list) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
dt {
color: $color-snow;
font-family: $font-family-headings;
padding: rhythm(1) rhythm(2);
@include bp-up(md) {
padding-top: rhythm(2);
padding-bottom: rhythm(2);
}
}
dd {
padding: 0;
margin: 0;
display: block;
border-top: 1px solid lighten($color-cyberspace, 10%);
}
}
@include e(link) {
display: flex;
padding: rhythm(1) rhythm(2);
color: $color-snow;
text-decoration: none;
font-size: $size-medium;
position: relative;
line-height: 1.5;
border-left: 0 solid $color-peacock;
transition: all 0.25s ease-out;
&::after {
content: attr(data-label);
display: block;
background-color: $color-lemon;
color: $color-cyberspace;
font-family: $font-family-headings;
padding: rhythm(1);
line-height: 1;
align-self: flex-end;
white-space: nowrap;
border-radius: $border-radius;
transform: translateX(rhythm(0.5));
margin-left: rhythm(1);
overflow: hidden;
transition: transform 0.25s ease-out;
transform: scale(0);
opacity: 0;
}
&:hover,
&:focus,
&.is-current {
background-color: lighten($color-cyberspace, 10%);
&::after {
overflow: visible;
transform: scale(100%);
opacity: 1;
}
}
&.is-current {
font-family: $font-family-headings;
border-left: rhythm(1) solid $color-peacock;
&::after {
background-color: $color-peacock;
color: $color-snow;
}
}
}
@include e(button-navigation) {
transform: translateX(-100%);
background-color: $color-cyberspace;
border-bottom-left-radius: $border-radius;
@include bp-up(md) {
display: none;
}
&.is-toggeled {
transform: translateX(0) scaleX(-1);
position: absolute;
right: rhythm(2);
z-index: 2;
}
}
}
@include e(buttons) {
display: flex;
align-items: center;
}
@include e(button) {
display: flex;
align-items: center;
margin: 0 rhythm(1);
padding: 0;
border: 0;
background-color: transparent;
&:disabled,
&:disabled:focus,
&:not([class*="play"]):not([class*="subtitles"]):not([class*="chapter"]),
&:disabled:focus-visible {
pointer-events: none;
cursor: not-allowed;
> svg {
fill: $color-concrete;
}
}
&:hover {
> svg {
fill: $color-peacock;
}
}
@include m(subtitles) {
&.is-active {
svg {
fill: $color-peacock;
}
}
}
}
@include e(countdown) {
font-size: $size-medium-plus;
padding-left: rhythm(1);
padding-right: rhythm(1);
}
@include e(play-icon) {
width: $icon-size-large * 1.5;
height: $icon-size-large * 1.5;
}
@include e(rewind-icon) {
width: $icon-size-large;
height: $icon-size-large;
}
@include e(forward-icon) {
width: $icon-size-large;
height: $icon-size-large;
}
@include e(subtitles-icon) {
width: $icon-size-large * 1.2;
height: $icon-size-large * 1.2;
}
@include e(subtitles) {
text-align: center;
width: auto;
position: absolute;
bottom: rhythm(1);
right: rhythm(1);
z-index: 3;
font-family: $font-family-headings;
min-width: 200px;
max-width: 300px;
display: none;
padding: rhythm(0.5) rhythm(1);
line-height: 1.7;
@include bp-up(sm) {
font-size: $size-base;
padding: rhythm(1) rhythm(2);
min-width: 300px;
max-width: 400px;
}
@include bp-up(md) {
font-size: $size-base * 1.5;
padding: rhythm(2) rhythm(4);
min-width: 400px;
max-width: 600px;
}
@include bp-up(lg) {
font-size: $size-base * 1.7;
min-width: 500px;
max-width: 700px;
bottom: rhythm(2);
align-self: flex-end;
right: rhythm(2);
}
@include bp-up(xxl) {
max-width: 800px;
}
&.is-visible {
display: inline-block;
&:empty {
display: none;
}
}
> span {
background-color: rgba($color-black, 0.8);
color: $color-snow;
}
}
@include e(button-abort) {
position: absolute;
top: rhythm(1);
left: rhythm(1);
flex-grow: 0;
z-index: 2;
font-size: $size-small;
@include bp-up(md) {
font-size: initial;
}
}
}
export default function getCurrentCueIndex(target) {
const activeCue = target.activeCues[0];
const { cues } = target;
return Math.max(Array.prototype.indexOf.call(cues, activeCue), 0);
}
import VideoGuideSubtitles from './VideoGuideSubtitles';
import VideoGuideTimeline from './VideoGuideTimeline';
import VideoGuidePlayback from './VideoGuidePlayback';
class VideoGuide {
constructor(element) {
this.element = element;
this.video = element.querySelector('.js-video-guide');
this.abortBtn = element.querySelector('.js-abort-guide');
this.playback = null;
this.subtitles = null;
this.timeline = null;
// Set all track elements to hidden mode to allow scripting
[].forEach.call(this.video.textTracks, (txtTrack) => {
txtTrack.mode = 'hidden';
});
this.attach();
// loadedmetadata might not be fired if the video is already loaded
if (this.video.readyState >= 1) {
this.onLoadedMetadata();
}
}
attach() {
this.video.addEventListener('loadedmetadata', this.onLoadedMetadata);
this.video.addEventListener('play', this.onPlay);
this.video.addEventListener('pause', this.onPause);
this.video.addEventListener('ended', this.onEnded);
this.video.addEventListener('timeupdate', this.onTimeUpdate);
this.abortBtn.addEventListener('click', this.onAbort);
}
onLoadedMetadata = () => {
this.playback = new VideoGuidePlayback(this.element, this.video);
this.subtitles = new VideoGuideSubtitles(this.element, this.video);
this.timeline = new VideoGuideTimeline(this.element, this.video);
this.video.classList.remove('is-loading');
}
dispatchEvent = (eventName) => {
[this.playback, this.subtitles, this.timeline].forEach((instance) => {
if (instance && eventName in instance) {
instance[eventName]();
}
});
}
onPlay = () => this.dispatchEvent('onPlay');
onPause = () => this.dispatchEvent('onPause');
onEnded = () => this.dispatchEvent('onEnded');
onTimeUpdate = () => this.dispatchEvent('onTimeUpdate');
onAbort = () => {
this.dispatchEvent('onAbort');
window.location.href = this.abortBtn.href;
};
}
const elements = document.querySelectorAll('[data-video-guide]');
elements.forEach((element) => new VideoGuide(element));
No notes defined.